Strange Right Margin on Mobile (Simple Splash Page)

[ruby76]

Hi all, I’m trying to design a pretty simple splash page that looks fine on desktops/laptops, but my attempts at responsive CSS are obviously missing something. I have code to adjust the sizing of containers, images and text, all of which works fine if I adjust the screen size in Chrome > Inspect, but if I select/use actual mobile devices, something is preventing the site from staying at 100% width, so there’s this awkward sort of margin on the right. I’m sure this is something super simple, but I need an extra set of eyes if anyone has a moment to check it out.

Pen link: https://codepen.io/ruby76/pen/WyyQKP

Thanks in advance for any help out!

[ruby76]

Solved! For anyone else who runs into this thread, it was as simple as adding the meta viewport tag, to deal with the difference in “screen resolution” and actual viewport size on mobile devices.

[Author]

Posts