full width row background

Beaver Builder
1

Hi

I’m trying to make my rows full width so that the background colour goes right across the full width of the browser (the content still staying with a fixed width). The page I’m working on with beaver is http://tablettechnologies.com/rugged-smartphones-phones/rugged-android-phones-smartphones/4-inch-ip65-android-phone-barcode/.

I have another site page, using a different builder (aagh!) where the row background goes full width: http://tablettechnologies.com/rugged-smartphones-phones/rugged-android-phones-smartphones/4-3-inch-ip67-android-phone/ so that is the look I’m after but can’t manage to replicate it.

within the row settings i am selecting Width -> Full width. This seems to be the right setting.

Any help would be much appreciated.

2

Hey James,

Your theme is limiting the content area BB can use. Try using the CSS snippet below and see if it works.

.fl-builder .wrapper .container {
  padding: 0px;
  width: auto;
}

Ben

3

hmm, the background goes full width but it creates a whole bunch of other problems. I put the code into wp-content/themes/gt3-wp-yorker-1.2/css/style.css. I’ve saved some screenshots of the before/after and put them at http://tablettechnologies.com/download/bb/

4

Hey James,

If you want the Row background to go edge to edge but leave the content fixed, change the Content Width to Fixed in your row settings. Is that what you are looking for by chance?

Or if you want the extra space on each side, you can instead use the code below while adjusting the left and right padding accordingly. :slight_smile:

.fl-builder .wrapper .container {
  padding-left: 20px;
  padding-right: 20px;
  width: auto;
}

Ben

5

that’s not the desired affect either. That solves the before/after issue shown in picture 1, but for picture 2 it still leaves my breadcrumbs full width rather than fixed. it seems like we’re shifting the wrong container.

how come the page http://tablettechnologies.com/4-3-inch-ip67-android-phone/ can achieve the desired result? I know it’s a different builder but it’s the same site and theme etc.

for my row settings I am already using Width -> Full width and content -> fixed.

6

also, with the latest code snippet the background doesn’t reach the edge because of the padding. So i think we’re editing the wrong property. I’ve left the code active for now as it only really affects 1 page: http://tablettechnologies.com/rugged-smartphones-phones/rugged-android-phones-smartphones/4-inch-ip65-android-phone-barcode/

7

Hey James,

Sorry, forgot one bit on my code above.

.fl-builder .wrapper > .container {
  padding-left: 0px;
  padding-right: 0px;
  width: auto;
}

I’ve just now seen the page for the Rugged Android Phones, since it’s using a different layout, Boxed, we can target it separately.

.gt3_boxed.fl-builder .wrapper .container {
    padding-left: 50px;
    padding-right: 50px;
}

Ben

8

interesting, we’re back where we started, layouts seem normal and the background is still fixed rather than full width?

9

Hey James,

Do you mind sharing temp admin access to your site so we can check?

Ben

10

[Content Hidden]

11

Hey James,

Not really sure what happened but it seems you pasted the code with an incorrect character. Check screenshot for reference.
http://imgur.com/4FKcak5

I can’t seem to find where you’re adding that code though. Try deleting that part and type it manually.

Ben

12

putting code here:

tablettechnologies.com/httpdocs/wp-content/themes/gt3-wp-yorker-1.2/css/theme.css

strange, I copied and pasted before. Copied and pasted again, stared hard, looked the same, saved the file and hey presto it’s working.

anyhow, awesome support as always, thanks Ben!

13

Awesome! Glad it was just a fluke. :slight_smile: Enjoy! :slight_smile:

Ben