So my product landing page passes all the tests in the testing suite, but I’m not entirely happy with it. It looks fine on a full browser, but once it goes under a certain width everything jumbles up (like the CodePen thumbnail).
I know that the solution is to have a media query for smaller screens, but I can’t for the life of me work out how to not have everything overlapping each other.
I know it doesn’t matter too much right now as it passes all the tests, but this is something I would kind of like to get right in future projects or it’s just going to follow me like a spectre.
Positioning/display is definitely a weak point of mine so any tips would be appreciated.
A few recommendations to improve your responsiveness
- move the
h2 out of the
header and down into the main body, above the first box. There’s too much content in your header and it’s stacking when the screen shrinks down. Using
flex will help you keep the logo left and the nav to the right
- Your media query is too small, what you’re telling it to apply those styles when the screen is 150px, for reference an iPhone5 is one of the smallest viewport out there and that’s 320px. A good way of working out when you’ll need a breakpoint, is to resize the window, notice when things move/look broken and make the changes. I’d say you’ll want to change things from between 700/750
- The css within your media query is reducing your big block level elements to 75% width? You should keep these things at 100%, as you’d want them to take up 100% of a phone screen. Try using your media query to increase/decrease font-sizes or padding/margins
- You have an extra
</div> after the
.pricing div and your
#content div is missing it’s closing tag
- Try and avoid using
float, you can align element a lot easier with
Thank you so much for your advice. I’ll have a play and see what I can do. I think my issue was the fact there was so many options and I wasn’t sure which ones would have good results.
And thanks for pointing out about the media query. I think I was overestimating pixel size!