Build a Product Landing Page on small device

Tell us what’s happening:

the display on mobile devices is all skew-if. i am trying to fix it with a media query but it doesnt seem to be working.

Your code so far


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:

What exactly do you want to happen at small screen? Are you looking for certain things to disappear? Stack neatly? Get smaller?

You do have some fixed dimensions (margins for positioning and height on sections) that are going to be a problem as the screen gets smaller. Floated items will become a problem also (the video). If you find a suitable break point you could address all of those with new style declared in a media query(ies)


I believe that some flexbox was a requirement for this project. That would be a good candidate for a responsive layout scheme. I see a flex container in your page but you haven’t really exploited it since there is only one nested element. There are quite a few flexbox layout articles and tutorials available online. A side-track into one of those would be worth your time.

Link below is more a cheat-sheet with comments than a full layout tutorial but good to have open in a tab if you go the flexbox route.