White space/border in smartphone breakpoint

Question

Hi everybody,  I am working on a website and have realized that on my smartphone when I open the website and "zoom out", there is a white space on the right side (see attached screenshot). There aren't any objects or text there. But the padding also doesn't show on that side (i.e., is "outside the screen") in the editor, unlike on the left side. Any ideas what the problem could be?  Your help is much appreciated!

iamteejay · Accepted Answer

Can you select the section with the white space at right along with the inspect panel details?Without seeing the details, would make sure of all the obvious settings; full-width of the element AND grid. I often check the inspector, but forget to review the grid underneath it. Make sure there is not a column in the mobile environment and your sections (s) is or are only occupying the larger, left column. I have done this countless times as I massage the grid from breakpoint to breakpoint. One other detail is to make sure your header and footer aren't more than 100%, leaving the sections to appear not wide enough. Good luck.

Lys Glassford · Answer

Sometimes the margins in the header, create large white spaces when you switch from breakpoint to breakpoint. Double tap the header and adjust the top columns to fit the screen and the white space will be removed.

Lewis Clark · Answer

I just had the same problem.  I ran my cursor down the extra white area and found a hidden bit of text was messing it up as it was larger than the screen size.I hid it, and boom all working.

Cameron Dour · Answer

I'm having a similar issue. When I slide the page to the right, this white bar shows up. But it also disappears part way down the page and then everything has the correct width. The page has zero columns/grids and there are no objects pushing into the space. Header/Footer are all set the the same min/max width.A similar issue happens on my desktop breakpoint when the page is reloaded below the header.