Why does my project look like this?

Why does my full screen codepen on my phone look like this:

But when I Inspect my work on my laptop in the small screen view, it looks like this:

My CodePen: CodePen.io/pleeseno/full/MZBoJV

Not sure but if it helps here is a shot from my phone… galaxy active s8

1 Like

Emulators always need to be taken with a grain of salt. While the viewport is being set to match the phone selected, chrome’s rendering engine is still being used (not iOS Safari) and what you see may not be accurate.

If you want access to dev tools for debugging the mobile view, you can open Safari, connect your phone via USB, and look in the develop toolbar to connect.

1 Like

Thank you for the reassurance that I’m not crazy lol! It might be because I’m not building my site on an apple project and didn’t make it compatible?

Thank you for your explanation and suggestion! That does make sense. I’m not building my page on an apple product, so maybe I have to make it compatible for apple iOS products? Is that what the css variables are useful for?

The bottom line is that Safari and Chrome sometimes interprets CSS and JS in different ways and the webpage looks and acts different as a result. The best way to fix these problems is to test your site on any devices that you want to support. CSS variables might be useful for this in some way, but they certainly aren’t required for cross browser support.