Design comparison
Solution retrospective
I need help with the media queries, because if I see it on my laptop, it looks correct and works fine, but if I change min to max on mobile or desktop, everything is crashed. Exactly here:
<link rel="stylesheet" type="text/css" href="./mobile.css" media="screen and (max-width:375px)"/>
<link rel="stylesheet" type="text/css" href="./desktop.css" media="screen and (min-width:1440px)"/>
Community feedback
- @rrebolledo90Posted over 1 year ago
I think the issue you are encountering here is due to having two style sheets. When you resize the window the browser if displaying multiple style sheets on your webpage. That is why both images are showing when you resize your window, and why your content is shifting to different locations in the webpage (conflicting code). Generally, having two style sheets is ok, but not for a project this small. What you need to do is apply a media query at the 375px break point you designated on your mobile.css sheet on just one style.css file. A project this small would just need one html file and one css file. I also noticed that you tried to link the style sheets using the @media method, I don't have to much experience doing it that method, so it might have to do with that aspect as well.
Marked as helpful0
Please log in to post a comment
Log in with GitHub
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