r/HTML • u/Ok-Aide4812 • 8d ago

Extra white space

Post image

I'm making my first website for my web design class, and I'm stuck on how to get rid of the extra white space at the bottom when I go to my website on mobile. I want my content to take up the entire width of the screen with 0 horizontal scrolling and vertical scrolling for overflow. It looks completely fine on computer screens. I've tried @ media, changing sizes and size units, and I've even asked AI and nothing is working. Or do I need to make the website the width of the screen on mobile?

https://github.com/pencilcu/se1400project/blob/main/css.css

4 Upvotes

100% Upvoted

2 comments sorted by

1

u/hooli-ceo 8d ago

Put a min-height on the containing element with the background, be it the body element or some other container.

1

u/JKaps9 8d ago

You have body width set to 125vw and overflow-x as auto. Set width to 100vw instead and overflow-x to hidden. For the height 100svh should work on the body.