Archived topic
Overflow-x issue
3 replies · Started by Ryan on October 14, 2021
It's always difficult to find an overflow issue. I finally narrowed it down to if I use a block with the .alignfull class. Like the following in my home page header. https//www.ryansmithphotography.com
.no-sidebar .entry-content .alignfull {
margin-left: calc(-100vw / 2 + 100% / 2);
margin-right: calc(-100vw / 2 + 100% / 2);
max-width: 100vw;
width: auto;
}For some reason that doesn't seem to be calculating the width quite correct and causing a slight overflow. Using overflow-x:hidden on the element doesn't seem to work. But if I delete the element or set max-width to 99vw it fixed the issue. Do you have any ideas? Thanks.
Hi Ryan,
The Alignfull and Alignwide aren’t using the best way to make things full width in our opinion as Tom summarized here:
https://generatepress.com/forums/topic/horizontal-scrollbar-on-align-full-items/#post-1771522
I would highly recommend using the alternative and better solution Tom offered in the second half of the reply.
I realized it was because of scroll bars being enabled on the Mac. That seems to be a known issue. Adding overflow-x: hidden on the body seems to be a good enough solution.
Sounds good :)
