[Resolved] Content too wide adds an horizontal scroll bar

[Alvaro]

Hi,

I’m having a similar issue to this one on this site: 5livros.pt

Tom’s temporary solution does remove the horizontal scroll bar but there’s still some white space on the sides of the page content I’m not being able to find the culprit.

Any ideas?

Thanks.

Álvaro

[Leo]

Hi Alvaro,

Can you try disabling all plugins except GPP and GB to see if the issue is coming from one the other plugins?

Let me know 🙂

[Alvaro]

Hi Leo,

Sorry for taking so long. It’s a live site, had to do it with a staging site.

Disabled all the plugins and had the same issue. It still happens in the pages that have full-width content, like this one https://staging.5livros.pt/ but not this one https://staging.5livros.pt/blog/.

Thanks.

[Ying]

Hi Alvaro,

It’s because you are adding alignfull to every GB container, it’s not a very good practice since the CSS WP wrote foralignfull class always causes horizontal scroll problem.

Please remove all the alignfullclass from GB containers, GB container has its own option to go full width:
https://www.screencast.com/t/8n4DcbTOBW

Let me know 🙂

[Alvaro]

Hi Ying,

I don’t think that’s it. In the live site I don’t have alignfull and the problem persists: https://5livros.pt/

Thanks.

[Ying]

For example:
https://www.screencast.com/t/Qg7a7pl2

Could you remove them all first, then we can have a look if there’s anything else might have caused the issue?

[Alvaro]

You’re right, that came from a reusable block. Now I think I got it all, but there’re still some white space on the left and on the right, except for the footer, I think: https://5livros.pt/

Thanks.

[David]

Hi there,

are i am seeing this CSS on your site:

.grid-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    padding-left: 10px;
    padding-right:10px
}

The padding properties aren’t part of the Themes styles so are coming from Custom CSS … i can’t see where it comes from whilst the cache plugin is enabled. If you want to disable that i can take a closer look.

[Alvaro]

Hi David,

I believe is from the child theme. I’m going to take a look and get back with the findings.

Thanks.

[Alvaro]

Hi David,

Yes, it was on the child theme. I used Addison Hall’s as a starting point and, as it seems, it’s not working as it should.

No white spaces on the side now: https://5livros.pt/

I wonder what that .grid-container CSS is doing. I’m sure I didn’t have this issue before. Don’t know what changed.

Thanks.

[David]

There should be no requirement for that CSS in the Child Theme. GP already applies the max-width and auto margins to grid-container dynamically. So the max-width in the themes styles will be set to match what you set in the Customizer.

[Alvaro]

I see. What could possibly have changed in the last weeks that made this CSS an issue?

I’m positive that I didn’t have this issue when the website went live, and the CSS was already there. Could it be some GP or Gutenberg-specific WP update?

Thanks.

[David]

There hasn’t been any changes to the Theme ( or WP ) that would affect that. GP never adds a padding value to the grid-container so that Child Theme CSS would have to have been overridden by some other CSS.

[Alvaro]

To be fair: the culprit CSS is not part of the original child-theme I linked above. I tracked the issue to an unsemantic-grid.css file I added to the child theme for some reason I can’t figure out right now.

My first guess is that maybe some HTML used in an older GP site, before GP stopped including unsemantic-grid.css, was re-used here, and including the unsemantic-grid.css file was a fast solution to a broken grid or something.

[David]

Yep – the old GP Theme relied on Unsemantic – which did require that padding value for offsetting the grid alignment. As your using the latest version of GP with the Structure set to Flexbox then you won’t need unsemantic unless for some reason you wanted its CSS to create rows.

[Author]

Posts