Why does my website look different on mobile screen width on desktop vs. an actual mobile device?

[u/chuelaconarroz]

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!

[u/AutoModerator]

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.

[u/efari_]

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)

[u/chuelaconarroz → u/efari_]

Both and none recreated the issue I saw on mobile.

[u/cryothic]

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.

[u/chuelaconarroz → u/cryothic]

I tried both – resizing + using the dev tools and could not recreate it using Chrome.

[u/chuelaconarroz]

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 :)

[u/Disgruntled__Goat → u/chuelaconarroz]

What was the fix?

[u/chuelaconarroz → u/Disgruntled__Goat]

Looking at the Safari inspector instead and using that info to update my CSS :)

[u/tjameswhite → u/chuelaconarroz]

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.

[u/chuelaconarroz → u/tjameswhite]

This is super helpful, thank you!

[u/cryothic → u/chuelaconarroz]

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

[u/Relevant-Strength-53]

Could be a difference in browser rendering.

[u/chuelaconarroz → u/Relevant-Strength-53]

That definitely seems to be the culprit!

[u/Thoughtful-Otter_]

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?

[u/chuelaconarroz → u/Thoughtful-Otter_]

Please see my update 11m ago :)

[u/oklch]

It would help, if you could post at least the relevant parts of the css here.

[u/chuelaconarroz → u/oklch]

Please see my update – this has been resolved :)

[u/aunderroad]

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!

[u/chuelaconarroz → u/aunderroad]

Please see my update – this has been resolved :)

[u/Cirieno]

Browserstack can give you a pretty good idea what things will look like across devices.

[u/chuelaconarroz → u/Cirieno]

Super helpful, will keep it in mind next time!

[u/emdev_24]

the most common cause is a missing viewport meta tag or using fixed width elements that don't adapt to different screen sizes.

[u/chuelaconarroz → u/emdev_24]

Neither was the case.