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?
No description
15 Replies
Chris Bolson
Chris Bolson8mo ago
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.
Tok124 (CSS Nerd)
Do you have the viewport meta tag?
ΛG_
ΛG_8mo ago
Yes Sure
ΛG_
ΛG_8mo ago
No description
Rusty_Sqeaker
Rusty_Sqeaker8mo ago
Can I ask what extension or program that is for the width and heights?
ΛG_
ΛG_8mo ago
it's an image tag. srry what do you mean by extension
ἔρως
ἔρως8mo ago
where can we see this online?
Rusty_Sqeaker
Rusty_Sqeaker8mo ago
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.
Kevin Powell
Kevin Powell8mo ago
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 imo
Rusty_Sqeaker
Rusty_Sqeaker8mo ago
How can i acces this mode im sort of new to this?
Kevin Powell
Kevin Powell8mo ago
In Chrome's devtools, click on this thing
No description
admo_dev
admo_dev8mo ago
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.
No description
ΛG_
ΛG_8mo ago
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?
Chris Bolson
Chris Bolson8mo ago
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.
ΛG_
ΛG_8mo ago
Will you take a look at that??!! That was the problem. You will go to heaven. You're a good man😂
Want results from more Discord servers?
Add your server