Width is messed up on mobile devices

I finished my camper leaderboard just to realize the width is completely messed up on mobile devices, it’s taking way too much space and I have no idea why.

I’ve already tried setting my body width to 100%, 100vw, and the same for my div and sections.

Does anybody have an idea of what might be causing it?

Here is the application https://oxyrus-fcc-leaderboard.surge.sh/

Hi @Oxyrus

Do you mean the images are too large? You can set a max-width and max-height property on elements that will ensure they don’t expand past a certain value.

Hi @joesmith100 thanks for replying.

I’ve already tried setting the body and parent div elements a width and max-width of 100%, but it didn’t work.

Sorry, I’m a little confused. Let’s start again, what specifically is it that’s taking up too much space?

The page has way too much width, I shouldn’t be able to scroll sideways.

Oh I see, that’s interesting, on my phone it fits fine, no horizontal scrollbar.

Is there any particular element that sticks out?

Also, you got a link to the code?

The repository is here https://github.com/Oxyrus/Campers-Leaderboard it’s the entire page that seems to be offset or it might be an error of the developer tools, I’ll check on my phone.

Oh yea durr, I forgot the dev tools have the mobile emulator.

Okay, it’s not completely obvious but I think its the h1 causing the problem.

Try setting some media queries to scale it down on smaller screens, or you can use vw on the font-size.

1 Like

That was the problem, buggy dev tools :smile: thank you @joesmith100!

1 Like