Design comparison
Solution retrospective
I watched several video courses on adaptive layout and media queries and for the first time made a responsive website that adjusts to the screen size (mobile - 375 pixels and desktop - 1440 pixels). I also finally figured out how to deploy a site to Github Pages. Any feedback is welcome!
Community feedback
- @grace-snowPosted over 3 years ago
Hi
This looks OK mobile vertical but breaks on landscape orientation. To fix this you don't need another media query but can refractor your code. Here are some tips
- font sizes must always be in a responsive unit like rems, not pixels
- beware using percentages for paddings, margins, widths etc. Depending on the context those values can change a lot
- only place widths and heights on elements that really need them. Always think - would a min- or max- do the job instead?
That should help to start with. Good luck, and well done so far
2@grace-snowPosted over 3 years agoPs one more thing - the learn more buttons should actually be anchor tags as they would be used for navigation
0 - @palgrammingPosted over 3 years ago
You need to check your Media Query your page switches from vertical to horizontal and back again. As well before your your vertical layout transitions to the horizontal it is too wide and needs to be contained before transition
1@IcEWaRRiOr01Posted over 3 years ago@palgramming thanks for the feedback. And how to do it?
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord