Hi bravewhale
Thanks for reaching out.
I haven’t looked a question like this before but just off the top of my head, yes, Page Builder needs to be running in a container with a defined width if you want it centered and constrained. The full width and full width stretched options allow rows to break out of a container, that’s their application.
If you can send through a link to this in action I can take a look and confirm.
I figured it out. I need the_content inside a container that has a width. Then if page builder is set to full width stretched row, it does some fancy javascript to calculate negative margins for the content, which then display edge to edge outside my container.
Honestly, I don’t understand why it’s done this way. Couldn’t it behave like a normal grid and have a set max-width for the rows, then if a user changes the setting to full width it changes that max-width to be 100%? Thus no longer being a centered row, but full screen width.
At least that’s how I’d do it if I were writing my own css and grid layout. Maybe I don’t understand the complexity of a page builder grid. And apparently this is a major issue, because the visual composer plugin doesn’t even have a full width option, but “they’re adding it in the near future.”
Thanks!
Glad to hear you made progress here.
This might not be the endgame but it’s where we landed up after much thinking on the topic. Pre 2.0 Page Builder couldn’t handle full width unless the theme was true full width. Using JS is the only way we could think of that would allow PB to offer full width in all themes. Page Builder operates within the .entry-content div, that’s usually in .content or #primary (I’m referring to _s classes here) and that usually has a width set. So the end result is that Page Builder can’t break out of that using it’s own width settings.
There could be other ways around this from a theme development point of view but the JS solution was the one we picked to work with all themes. Hope that makes sense.
If you’d like to offer full width in another way, our developer docs could get you started:
https://siteorigin.com/docs/page-builder/hooks/html/
That makes sense. I was assuming the theme was using a full width page template without any widths defined. I suppose it might be possible to have a full width page template included with page builder that the user selects before adding a full width row, but I’m sure that also brings up many unknowns about the user’s theme.
Thanks!
Thanks for your understanding here.
There would be other ways to do this. I just haven’t thought about it long enough yet to clearly lay one out for you.
But yeah, the plugin solution had to be theme independent.
All the best.
Hi,
I know this post is a year old, but I stumbled across it while looking for answers to this problem. I eventually managed to solve it by making my main content div 100% width to allow for the fullwidth modules, and adding the following code to narrow the standard width modules:
.et_pb_row {
position: relative;;
width: 75% !important;
max-width: 75%;
margin-left:auto;
margin-right:auto;
}
You can set the width to whatever you want.
