Design comparison
Solution retrospective
Any feedback is welcome. I'm having trouble with my @media css settings on mobile devices. I'm not sure what I'm doing wrong. When I look at it in Firefox it is fine, but mobile devices don't recognize my css.
Community feedback
- @ah298Posted almost 4 years ago
Hello! Nice job, the desktop version looks good. For the media query, I think you should be consistent whether you want to use min-width or max-width.
If you build your website starting from desktop layout --> mobile layout, use max-width. the larger screen on top of small screen. For example, @media(max-width:1000px){ } then, @media(max-width: 700px).
else, if you are doing mobile-first (which is the recommended way), use min-width. for min-width, small screen followed by larger screen. For example, @media(min-width: 700px) then, @media(min-width:1000px){ } .. hope this helps!
1@replicant1986Posted almost 4 years ago@ah298 Thank you very much for the help. I haven't gone back and fixed this project yet, but I took your advise on my next challenge, and it worked perfectly. Thank you again.
0 - @taaxo-amPosted almost 4 years ago
Remove that code from your CSS
@media (min-width: 1025px) {}
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