If you're viewing your website on a phone and see an annoying white bar or unnecessary gap, it's likely a whitespace (unnecessary blank space) You've run into a problem. This often happens on mobile if your website isn't properly optimized. In this article, we'll show you how to quickly identify and fix this error.
1. What causes the whitespace error?
The whitespace problem is usually caused by the following things:
- Too large elements: The width of a given section or element is greater than the screen.
- Long words or titles: For example, "congestion prevention", if displayed in a font size that is too large, it may stick out to the edge of the mobile screen. This is how we solved it for one of my clients!
- Incorrect container size: The section or container is not properly constrained.
- Drop-down menus or unnecessary margins: On the website of a client of mine who sells industrial drones (zdrone.hu) the menu items in the footer were too long, and these caused the whitespace error.
2. How do you check what is causing the error?
- Open the website in mobile view, or reduce the width of the window in your desktop browser.
- Check the white stripes: If the page can be dragged sideways, then there is definitely an element sticking out.
- Open your browser's developer tools (F12), then click the “Elements” tab.
- Select a suspicious item, then the Find width in CSSIf the overflow is not set correctly, the element may protrude.
- If caused by long words or titles, then it is worth displaying them in a smaller font size or turning on text wrapping.
3. How to fix the whitespace error?
If you find an element that sticks out, apply the following CSS code to it: Custom CSS section (or if you are using Elementor/Bricks Builder editor, you can also set it for the given element).
To fix the full page whitespace error:
html, body { overflow-x: hidden; max-width: 100%; }4. Where to add the code?
- If you want it to be valid on all pages, then Place it in the header or footer the custom CSS code.
- If you're using Elementor, Bricks Builder, or another visual editor, you can also make the change in the CSS settings of the problematic element.
5. What if these don't help?
If the above does not resolve the whitespace error, check the following:
- Margin and padding settings: If a section has too much margin, reduce the values.
- Flexbox or Grid settings: If the containers are next to each other, check that they are distributed properly.
- Tests on mobile devices: Every mobile browser handles the display a little differently, it's worth trying it on multiple devices.
Summary
Whitespace errors can cause a lot of headaches in mobile view, but a little They can be quickly fixed with a CSS change..
Do you know what the mistake is?
Apply the appropriate CSS settings!
Can't you see what's wrong?
Check the width of the element with developer tools!
Still not working?
Experiment with margin, padding and overflow settings!
With these methods, the white stripes will finally disappear from the mobile view!
I was a little nervous, and I hope I was able to help you! If you have any more questions, write to me, and we'll solve your problem together. But if you're bored with editing your page, still come to me, because you know: Your successful website is my success!
English 
Hungarian 