[Resolved] Horizontal scrolling issues

[Larry]

I noticed that I’m having some horizontal scrolling issues when I use full width images on some of my sites. I read through some of the other posts about horizontal scrolling and tried some of the suggestions, and they didn’t work 🙁

I’m using GP Premium and GB Pro

Thanks

https://taste.larryboulder.com

[Ying]

Hi Larry,

Your site is not available currently, can you check?

I noticed that I’m having some horizontal scrolling issues when I use full width images on some of my sites

Are you using the align full option from the image block? If so, yes, it will cause horizontal scroll.

But I’d have to see your site to make sure 🙂

Let me know!

[Larry]

I’ll contact Siteground and see whats going on, I can see it on my end.

I am using the align full option, is there a workaround to avoid the horizontal scrolling?

Thanks

Larry

[Ying]

I can see your site now.

Solution:
1. Do NOT using alignfulloption for any of the blocks.

2. Set the page content container to full width using the layout metabox in the page editor:
https://docs.generatepress.com/article/layout-metabox-overview/#where-is-it

[Larry]

Wonderful!

That totally did the trick 🙂

Many Thanks!

[Ying]

You are welcome 🙂

[Ben]

I’m getting same issues when using alignfull.

I understand what you mean about setting pages to be full width, but thats not practical on some sites and will undo a lot of formatting.
My work around is to put

overflow-x: hidden;

on html selector.

Is there any other way we can fix this without having to change all pages to full width and then have to correct any formatting issues that arise on each page?
Maybe adjusting .alignfull that appears in/wp-content/themes/generatepress/assets/css/main.min.css

.no-sidebar .entry-content .alignfull {
margin-left: calc(-100vw / 2 + 100% / 2);
margin-right: calc(-100vw / 2 + 100% / 2);
max-width: 100vw;
width: auto;
}

[David]

Hi there,

apart from creating the Full Width Content Container, all other methods that ‘force’ an element to be full width are prone to this kind of issue.

The issue arises because certain browsers on Windows devices display the Scrollbar inside the browser viewport, and there is no CSS method to account for that.

So at this time we recommend using the method that Ying provided.

[Author]

Posts