Full width

BB Theme
1

I have a buddypress page that can’t be edited using the bb plugin. I have created a cover profile image that I’m trying to get to go full screen. I tried using the row class, the fl-row, fl-row-full-width but to no avail.

unfortunately, it looks like the .container class is keeping it from doing so.

Do I have to use .container { width: 100% !important; } ?

this makes everything full width and seems like it would be a pain to have to go back and resize everything else on the site. Is there a more efficient way of doing this?

2

Hey Thomas,

Thanks for getting in touch! With the buddypress page, I am assuming that is because they outputting their own HTML for that page so you wouldn’t be able to edit it similar to WooCommerce pages like checkout, etc. You could always rebuild the page using BB and buddypress shortcodes if that fits what you are looking to do.

Re. full width, this appears to be separate from the above, correct? We have a dev docs section that has a bit of info on full-width rows if your theme isn’t allowing them out of the box. Does that help?

Best,
Billy

3

Sorry, I should have stated that I’m using the bb theme and plugin together.

I can’t rebuild the page using the bb plugin because the buddypress shortcodes for what i’m trying to accomplish don’t exist (it’s the static profile page that structures all the profile pages for the site).

Specifically, I’ve created a cover image for the profile. I want that part to go full-width but the rest to stay fixed-width.

based on an earlier suggestion in the forums, I could simply make the .container class set to auto and that would cause everything to go full width.

If I do this method, what is the best way to get everything else back in line? or is this even the right approach?

4

I guess what i’m saying is, how does the plugin override the beaver builder container class to make a row full width?

I’m assuming that by default, all the plugin’s rows are within the bb theme’s container class (which it’s width is set at 1020px)

So if it can somehow override it with it’s own class and go full width, can’t i just use the same class?

I used firebug to inspect some full-width rows created by the bb plugin on my other pages but when inserting their class into my div, it does not work.

Hope that helps to clarify.

5

Hey Thomas,

The plugin is actually overriding the theme’s container class (standard Bootstrap) to make the pages full width. Here’s the CSS that it’s using to do that…

.fl-builder .container.fl-content-full {
   margin: 0;
   padding: 0;
   width: auto;
}

You can probably change out the .fl-builder part of the selector to a selector that is specific to the page you are trying to make full width to get this working. Let me know how that goes.

Justin

6

if it could be useful to anyone, I ve been searching for ONE FULL WEEK, days and nights, to solve my problem. I have the Prose genesis theme and the solution was in this link for me. Hope this would help anyone who’s been struggling with this issue.