Mobile version of website looks different than chrome dev tools mobile view

Hello, I have encountered an issue in my new game-website I built using vanilla js. I arranged my website to work with mobile using the @media tag in css and everything worked fine in chrome dev tools.

After running my website on netlify I noticed that the original desktop version looks great and reacts like I wanted it to be, but the mobile version was the complete opposite, Some of the elements have changed font and color, when typing in some text in the input, the screen starts to move up and down. Most importantly my grid element was completely off from where it was supposed to be.

I honestly don’t understand why my page would look any different than what it was intended to look like in chrome and therefore I really need some help.

Here is an example of what I was talking about:

Comparison between mobile and chrome dev tools mobile

I would really appreciate any help :pray:

@huskyg22 This is likely outside the Netlify Scope of Support as it’s almost certainly just your project, but…

What model phone do you have?

What browser are you using on the phone?

Have you tried something like BrowserStack to debug your game on various devices.

Can you provide a link to your site and/or repository?

1 Like

Hey, I am browsing on Safari using an iPhone 14, I have not tried any debugger yet.

Here is the link: gameoflags.netlify.app

I have also just noticed that I can’t open my website using Google chrome on mobile…

Thank you.

Nobody else can check it for you if you don’t provide them the ability to.

https://gameoflags.netlify.app/

correct link

Using Browserstack I’m not seeing what you’re seeing.

Safari

Chrome

Which doesn’t mean that it’s not happening for you, just that it isn’t a consistent issue and you’ll need to keep investigating, check your phone settings, get your own BrowserStack account to do comparisons etc.

It’s not a Netlify issue though, so you’ll probably need to seek help in a community dedicated to general web development, like StackOverflow, or a game developer community.

1 Like

Thank you so much for helping! I will try to investigate some more.

1 Like

Good luck @huskyg22 I hope when you find your solution you can share it with the community for those that have similar problems.