Full row background edge to edge

I am currently using the Wantage theme with BB

When i use BB to build my pages the row widths do not go the whole width of the page so my background is limited to only 1080.

I am also using PageBulder by SiteOrgin and the i am able to get full row with background going from edge to edge 3080px.

How can i get the pages built with BB to full width?


Hi Tony,
either you take the BB Theme and change it to your needs or you create a page template in WordPress for full width.

I’d take the BB Theme because it gives you all you need.

Hope this helps,

I am using a full-width page template in WP but cannot get the rows to go full width. Here is an example:


i want the shaded background in the middle section to go full width edge to edge.

Hi, tony,

Your theme has 35px padding all around in #main, and the container a max-width of 1080px. You can adjust those in your stylesheet or add:

#main {
    padding: 35px 0 !important;
body.layout-full.responsive #page-wrapper .full-container {
    max-width: 100% !important;

Thank you for the information but when i add this code everything now stretches the full length of the page including the text. I just want the row background to stretch the full width.

Some of your rows have classes for full width, and some have classes for fixed width, which are max 1100px. Full width rows stretch 100% but fixed only 1100px. You would need to set fixed width to what you need, and on the rows that need it.

Just re-read what you posted so try this in addition to the previous code:

.fl-row-full-width .fl-col-group {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;

BTW - nice looking site. Clean and easy on the eyes.


I added the code you suggested and it fixed the row issues but now the heading and footer are stretched the full width of the screen. I want those to be fixed to the 1100 px also. any advice?

thanks in advance for you assistance.

Header/Footer issue happened to me with Genesis Magazine Pro.
You probably have to change the CSS Selectors to your theme’s, but here’s how I solved it using a body class .beaver-page:

/* Beaver Builder Junior Atoms KLM*/

.beaver-page.fl-builder .content,
.beaver-page.fl-builder .content .page,
.beaver-page.fl-builder .content-sidebar-wrap,
.beaver-page.fl-builder .site-inner {
   	max-width: 100%;
    width: 100%; 
	padding-left: 0;
    padding-right: 0 !important;
	padding-top: 0px;