Responsive Results Summary Modal using CSS Flexbox
Design comparison
Solution retrospective
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?
Community feedback
- @NatureSon22Posted about 1 year ago
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
3 - @jcnevessPosted about 1 year ago
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.
1 - @Tee-DsPosted 12 months ago
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...
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