I'm not entirely sure that I used media-queries correctly. I used min-width: 375 to trigger CSS rules for the mobile layout, and max-width: 376 for the desktop layout. Do I really need to specify both min-width and max-width? I feel like I should be able to specify just one of the two. Additionally, most of the CSS is outside of the media queries, just the CSS needed to update the layout is in the media query blocks. Is this the proper way to use media queries?
@NatureSon22
Posted
Using either min-width or max-width alone in media queries can be sufficient in certain circumstances, especially if you have a straightforward design requirement. However, combining both can offer more flexibility and precision
@jcnevess
Posted
Yes, You can specify just one of them.
Additionally, most of the CSS is outside of the media queries, just the CSS needed to update the layout is in the media query blocks. Is this the proper way to use media queries?
I think so. You should choose between mobile-first or desktop-first development and let the styles for your choice outside the media queries. Then create the styles for other screens in media queries.
@Tee-Ds
Posted
Because of the type of challenge it is I think you only need to specify one media query I used (max-width:375px) Its best to think of it like this: min-width=starting from... max-width=up to...
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
