When Full Width Isn't Full Width

Project: elementsapp://downloadDocument/0DAj5gkQKUir

Test URL: Untitled Page

Running Elements 2.1.2.

Hello All,

I’m having a problem on iPhone/mobile with the main banner and the full width “Process” band lower on the page. The band is from the Elements Essentials pack.

I want these two backgrounds (photo/solid) color to be full width. On mobile in Elements, it shows. But when I publish to the dev site there is a narrow white band on the far right side of the screen that I can’t figure out how to get to go away. This appears in Responsive Design Mode on browsers and iPhone (Safari/Firefox/ Brave).

Any idea where I misconfigured the components?

Dev Site

Elements View

Looking at your screenshots, that WHITE bar looks like the scrollbar background.

Is it still there when the scrollbars disappear, or do you have the scrollbar set as always visible?

This behavior is only appearing on the homepage of my project.

If you look at the full dev site ( HX Aviation | Aviation Intelligence for Aircraft Owners ) it’s the same mobile nav on every page, but this white bar only appears on the home page (as far as I can tell). And it doesn’t show in Elements.

A quick way to find out what section is causing the issue is to systematically start deleting each section on the page until the problem disappears.

I think it’s this sections causing the issue, specifically the objects you have positioned in the background.

To fix this you probably need to bring them in a little more on mobile.

Happy Weaving :slight_smile:

You nailed it. Thanks!

1 Like