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/
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.
That was the problem, buggy dev tools thank you @joesmith100!