Full row background edge to edge

Beaver Builder
1

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?

thanks

2

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,
Leo

3

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

http://www.michellelaxa.org/leadership-leadership-teams/

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

4

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;
}
5

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.

6

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;
}
7

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

8

Abland,

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.

9

Tony:
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;
}

http://forum.wpbeaverbuilder.com/support/q/bb-and-genesis-for-landing-pages/#post-7552