[Resolved] Page body jumps to the left randomly / intermittently

[James]

Firstly let me say that I have really enjoyed working with GeneratePress + GenerateBlocks and avoiding the need to use a third party page builder. I’ve finally found an issue that I can’t fix directly or find a solution for on the forum!

On mobile devices the width doesn’t match the screen meaning the page body can be dragged to the left.

Related to this, occasionally the whole website jumps ~300px to the left leaving a white margin. Refreshing doesn’t have any effect, the only way to reset the layout is to click a navigation link to be taken to another page which then causes it to jump back. The last time I noticed this was on a post.

The jump is very hard to reproduce and as such I can’t supply a screenshot but was wondering if the GP team has come across this before?

I wonder if this issue relates to me using a Block Element to replace the whole footer? Or whether it relates to pages that have potentially conflicting grid systems, i.e. pages which have a package Gutenberg block from WordPress Download Manager.

Can you shed any light on this? Links to the website have been supplied in private.

Thanks!
James

[Tom]

Hi there,

Strange one, I deleted everything from the page in developer tools and the scroll was still there.

Does the horizontal scroll still happen on a regular page with nothing but some paragraph text?

[James]

Yes, it appears that the horizontal scroll is still there with just paragraph text and no blocks.

Have sent you a link to the test page I created so that you can have a look.

[James]

Possibly related, but when I rotate my iPhone to landscape, you can see the slide-in menu on the edge of the right hand side of the screen and you can drag the page to reveal a white visible gap?

[James]

I also tried to follow the advice on this Stackoverflow question and put the following into the console:

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

…which doesn’t seem to show any of the post content breaking out but I noticed the black WordPress admin bar does go very wide of the page.

If it is helpful I can give you access to our staging environment. And I’m also open to updating the staging environment to GP 3x to see if that makes a difference? (we have a custom plugin that uses the GP 2x unsemantic grid framework on a few subpages of the site so was hoping to avoid updating the grid system for at least a few weeks after stable!)

[David]

Hi there,

can you temporarily disable the Footer Block Element and let me know

[James]

I have disabled the footer block temporarily so that you can have a look.

This does appear to be the cause of the issues! So what do you recommend I do to re-enable the footer block element and address address the issues above?

[James]

(I’ve added the footer blocks to the test page so that you can inspect the markup)

[David]

Can you try adding this CSS:

.wp-block-search .wp-block-search__label {
    width: auto !important;
}

[James]

Done, does it work at your end?

[David]

Where did you add the CSS? I am not seeing it in the site

[James]

In ‘Additional CSS’ in the customiser – is there a better place for the CSS to live?

[David]

Aah must have been cached. Its working now for me. Try clearing your browser cache if your not seeing the change.

[James]

Yes, working here too! So it was the search box causing the width issue?

Thank you so much David.

[David]

Yep – who would have thought the Search Label would cause that.
Glad to be of help.

[Author]

Posts