Design comparison
Solution retrospective
I still thinking that I need help with media queries. (?)
Community feedback
- @skyv26Posted about 3 years ago
I agree with @Da-vi-de but there is one thing missing. It really matters a lot that your approach is mobile-first or Desktop-first. Suppose if you are going with mobile-first approach then for bigger screen use "min-width" in every media query according to screen sizes requirement. if you are working on Desktop first then use "max-width".
One more important thing, in mobile first write your css in ascending media query order with min-width property. and in desktop-first write css in descending media query order with max width property.
If you disturb the order then you will get undesirable visual results. Because media query always dependent upon previous media query css property or default css property.
with regards Aakash Verma
Marked as helpful0 - @Da-vi-dePosted about 3 years ago
Hi, good result on this challenge. Well done!
- After coding mobile version you just need to add media queries
min-width: ...
, that's it! You wrote the last media querymax-width: 900px
in which there's thebackground-image
, you could do it at the beginning, what you've done doesn't really make sense because it's like saying "make changes when the width is smaller and equal to 900px" but you already took care of that, so you can delete it and move that code in your firstbody
. The first media query is right!
Hope it helps a little! Keep coding :-)
Marked as helpful0 - After coding mobile version you just need to add media queries
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