I have looked all through our wordpress widgets, widget settings, page settings, browser inspector, etc. and I cannot locate what's causing our site to have padding or margin on the right-hand side of the screen, but only on mobile. It also isn't happening elsewhere on the site outside of the homepage. Can anyone help me isolate what's causing it or what line of code I can add to prevent it from showing? Thanks.

https://lunarlab.io/ Notice the dark background and then the ~20px of whitespace to the righthand side of the screen.

CodePudding user response：

You have a div with data-attribute data-id="a3013be" that is pushing your entire website. I supose that you can remove it from elementor in the visual composer (it should be an empty element on the page layout or something like that).

However, if you want to hide it directly with CSS you can select this data-attribute, like this: div[data-id="a3013be"] and set display: none on it.

CodePudding user response：

I believe it has something to do with the animated red moon that is moving on the screen that is changing the width of your site on smaller screens. If you notice when the website is sized down to a 4:3 area, the width of the website increases and decreases when the red moon moves on and off the screen. It looks like it uses the elementor plugin. Hopefully this helps address the root of the issue.