Website on Smaller Screens
Hello. I used media queries to adjust the view of my website when it's being viewed on smaller screens or resolutions. It works when I shrink my browser window but when I inspect and preview it mobile, it still looks really bad. Why are my media queries not working?
15 Replies
Can you share an example of the media queries that you are using?
If you are using the newer media query syntax it might be that your mobile browser doesn’t support them.
Do you have the viewport meta tag?
Yes
Sure
Can I ask what extension or program that is for the width and heights?
it's an image tag. srry what do you mean by extension
where can we see this online?
I mean like at the top of the screen you can see the width you shrunk your website what is that program? I don't know what it is an extension or program and what its called.
that's the responsive mode that's built into Chrome
Without seeing a live version of it, it's hard to say for sure... my guess though, is there is something causing overflow. My guess is the 2 column part, but it could be something else. Instead of overflowing, the responsive mode often just zooms out to keep everything on the screen.
And, as a side note, those media queries stress me out 😅 - Normally we make media queries to cover ranges, so in this case, one at
600px is great, and then maybe the next one would be at 900px or 950px and all the different selectors could then be in that one media query.
The difference in screen size from 900px to 1000px isn't very much difference, just pick one and set the size you need imoHow can i acces this mode im sort of new to this?
In Chrome's devtools, click on this thing
I had a similar problem and I don't know if this will help but I tried using min-width in my media query to adjust the body and it worked for me.
I use GitHub pages to host it. Here: https://a-genephat.github.io/Allen-Portfolio-Site/
Here is the site if you want to see it live Kevin: https://a-genephat.github.io/Allen-Portfolio-Site/
hm that's really interesting. Everything fits on the page perfectly, no overlapping and stuff?
You have set the the viewport to
initial-size=1.0 That should probably be initial-scale=1.
That might not be the issue but it is one thing to check.
I am pretty sure that that is your issue - I just tested it in Chrome, modifying the user agent and changing it to "scale" and it shows correctly.Will you take a look at that??!! That was the problem. You will go to heaven. You're a good man😂