Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Fylo Data Storage Component Challenge

Cody 225

@replicant1986

Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

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

ah298 165

@ah298

Posted

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

Cody 225

@replicant1986

Posted

@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-am

Posted

Remove that code from your CSS

@media (min-width: 1025px) {}

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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