Full width pages in Genesis with Beaver Builder

Here’s a useful bit of CSS for your Genesis child theme to achieve a full-width page layout brought to you by Neil Gowran. The code includes CSS for a Genesis child themes, Altitude Pro, Executive Pro, Outreach Pro, Enterprise Pro, mobile and general child themes.

Add the CSS to your child themes stylesheet and you should be able to create full-width rows in your layout.

To get this to work, install the Genesis Framework and activate your child theme and the Beaver Builder Plugin. Open up your Genesis theme settings panel and look for the default Layout section. Choose the full width, no sidebar layout option. If you choose sidebars, then adding the CSS code above will force the sidebars to site above and below the full-width content so it’s not what we want to achieve.

Here’s the standard sample page with a full-width layout – no sidebars.

Open up the page builder, click on the row settings and choose ‘Full width’. Click on the Tools button in the menu bar…

…click the Global settings button in the dialog…

Copy and paste and the add the CSS code in the CSS section of the global settings dialog

As soon as you add the CSS code you’ll notice the red row in the background is now full width.

The final result of adding the CSS to our page – a glorious full-width row!