Solve .breakout-full class body overflow in Automatic.css

min read / Automatic.css, Plugins, WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: If you use Automatic.CSS framework, you may encounter a known glitch when using .breakout–full class. It’s an issue with anything that is with 100vw. The overflow is caused by the vertical scrollbar on the edge of the page. It only shows an overflow to the user depending on their browser or operating system settings. It’s…

If you use Automatic.CSS framework, you may encounter a known glitch when using .breakout–full class. It’s an issue with anything that is with 100vw. The overflow is caused by the vertical scrollbar on the edge of the page. It only shows an overflow to the user depending on their browser or operating system settings. It’s a weird known CSS glitch. Currently – the way to fix it is with JavaScript or with CSS.

CSS Fix for sections with .breakout–full (recommended)

I prefer this solution to JavaScript. Just use this code in your custom stylesheet on the parent element of the sections:

I use this in Bricks:

main { 
    overflow: hidden; 
}

In Oxygen Builder this may work:

.ct-section:has(.breakout--full) {
    overflow: hidden;
}

0 comments