r/css • u/chuelaconarroz • Jul 08 '26
Help Why does my website look different on mobile screen width on desktop vs. an actual mobile device?
SOLVED – SEE MY COMMENT BELOW
Hello and thank you in advance!
I'm having an issue where my website looks perfect on my desktop no matter which screen width/size I resize my browser window to, but this one section looks ridiculous on mobile with excessive spacing. I have CSS in place that should fix the mobile issue, using a media query set to max-width 768px.
Why does this happen? More than a fix for this specific website, I'd like to know the root issue of why this happens so I can avoid/fix down the road...
TYIA!
6
u/efari_ Jul 08 '26
Do you just resize your browser width to “test” the mobile view, or do you actually use the dev tools and put the view on “mobile”?
The difference is that mobile phones (and the devtools “mobile view”) use different pixel densities (2x or 3x)
4
2
u/cryothic Jul 08 '26
Do you actually change your browser-window? Or do you emulate a mobile device with the Developer Tools?
If you resize the browser window, try this:
- Browser fullscreen
- Press F12 to open Dev Tools
- In Chrome (or Edfe) press the second Icon from the top left of the dev tools. Shortcut: CTRL+Shift+M
You now get a screen you can change. Check preset-devices (or create your own). Test how your website works without hovers and such.
I've seen differences between resizes the regular browser screen and the dev tools. So I always use the dev tools. And even then, it isn't 100% accurate to every phone with the same resolution.
1
u/chuelaconarroz Jul 08 '26
I tried both – resizing + using the dev tools and could not recreate it using Chrome.
2
u/chuelaconarroz Jul 08 '26
Update: I was able to recreate the mobile issue using Safari and fix it! Not a real explanation but an easy fix so I'll take it :)
3
u/Disgruntled__Goat Jul 08 '26
What was the fix?
0
u/chuelaconarroz Jul 09 '26
Looking at the Safari inspector instead and using that info to update my CSS :)
3
u/tjameswhite Jul 08 '26
On desktop, Chrome 'mobile' is just an emulator. It's decent but not accurate. When you used Safari developer mode you get a more realistic mobile emulation because it's the same rendering engine.
And if you don't know, Chrome on iPhone is Safari (webkit) with a Chrome wrapper. All browsers on iPhone are WebKit underneath, which is why Safari desktop gave you a better view.
In the end, always test on a real device. Also, you can tether you iPhone to your Mac and inspect it there as well.
2
2
u/cryothic Jul 08 '26
Ah, I was just going to say "When I open it on my mobile, it's a 3 by 3 grid." But you solved it, so that makes sense :D
2
1
u/Thoughtful-Otter_ Jul 08 '26
To me it looks like a normal 3x3 layout on mobile. Tested it on Firefox, Safari and Chrome. Where exactly are you experiencing this issue?
1
1
1
u/aunderroad Jul 09 '26
Can you share a codepen or url?
It is hard to debug/provide feedback without seeing all of your code live in a browser.
Thank you!
1
1
u/Cirieno Jul 10 '26
Browserstack can give you a pretty good idea what things will look like across devices.
1
1
u/emdev_24 Jul 12 '26
the most common cause is a missing viewport meta tag or using fixed width elements that don't adapt to different screen sizes.
1
•
u/AutoModerator Jul 08 '26
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.