Tomás Dornas Perone Tomás Dornas Perone - 1 year ago 79
CSS Question

Really strange white gap on mobile devices

I know other people have already asked about this before on StackOverflow, but I have been trying to fix this problem for days already with no luck. My website looks great on the computer but when I test it on mobile, a really annoying white space shows up in the right side of the display.

I tried to...

  • Set overflow-x: hidden on the body;

  • Set overflow-x: hidden on the html (it affected the scroll);

  • Set width: 100%, on both body and html;

  • I tried removing the navbar, that was apparently overflowing the body, but that didn't solve my problem.

It's like there's a "ghost" lying in that white space, because I also removed all the "padding-left" and "margin-left" from all the elements. Nothing.

Does anyone have a clue?

Here is the link:

Thank you.

Answer Source

As a quick fix - add 'overflow: hidden' to the 'container' class.

.container, .container-fluid:overflow: hidden;

Hope this helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download