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.

genesis full width screenshot 01

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

genesis full width screenshot 02

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

genesis full width screenshot 03

…click the Global settings button in the dialog…

genesis full width screenshot 04

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

genesis full width screenshot 05

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

genesis full width screenshot 06

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

genesis full width screenshot 07

Posted in

Michael Davis

Chief brainstormer at I'm Not Marvin, a development agency specializing in WordPress Applications. I've been in web development in one form or another since the late 90's. If I can't be reached I'm probably hitting the trail on my mountain bike.
  1. Karl on November 13, 2016 at 10:39 am

    Does this only work for pages?
    Is there a solution for posts too?

  2. Jim Proctor on July 22, 2017 at 6:10 pm

    Thanks for this great code. I’m using the generic child theme version for Atmosphere Pro, and noticed that either the padding or margin-top specification under .site-inner obscures the post title and postmeta at top (i.e., they are in page source but they don’t display).

    I now see the same in your screenshots above.

    Was that intentional? I’d like to preserve the post title and postmeta at top if possible.

    Regards,

    Jim P.

  3. Chelsea Perell on September 17, 2017 at 8:33 pm

    Thanks very much for that! I tried the Executive Pro code and it worked! I’d also like to make this change to full screen on the landing page.
    Is this possible?

  4. V on January 4, 2018 at 11:57 am

    Does this work for Infinity Pro?

  5. Elizabeth on February 14, 2018 at 9:26 am

    That was so easy…I hate getting too messy with CSS code! Thanks so much!

  6. Prestiti Consolidamento on February 22, 2018 at 6:13 pm

    Thanks, I’ll try with the News Pro theme!

  7. James mathew on May 2, 2019 at 10:28 am

    Am using the Divi theme with Beaver Builder. i used this css code but it doesn’t seem to work for the full width option

    /*Divi – Beaver Builder Full Width Page*/
    .fl-builder .site-inner {
    padding: 0;
    border-top: none;
    max-width: none;
    }

    .fl-builder .site-inner .wrap {
    max-width: none;
    }

    .fl-builder .entry {
    padding: 0;
    margin-bottom: 0;
    border-top: none;
    }

    .fl-builder .breadcrumb,
    .fl-builder .entry-header {
    display: none;
    }

    @media only screen and (max-width: 1200px) {

    .fl-builder .wrap {
    padding: 0;
    }

    }

Leave a Comment