Archived topic
Full Width instead on Boxed Layout
36 replies · Started by Russell Masters on March 28, 2015
It sounds like we were also trying to do similar things. full width sections with content width adjustable arbitrarily, similar to what it does to the header and footers. When I put body .grid container to 100% like you said, it gets overridden by the inline.
I'm not too sure what you mean by that? There shouldn't any inline width to override the CSS? Can you link me to an example page?
So I'm going to jump back on this thread because tbh I haven't been using GP due to the boxed layout being the only option.
My original question was that I want to use Beaver Builder with GP because I think the two of them are fantastic. GP code and options are great and the theme works flawlessly from what I have seen.
However with todays designs often leaning towards a full width option instead of boxed layouts I feel GP should be able to have a fullwidth/fluid option for content not just header and footer. We do use boxed layouts for certain sites, i would just love GP to be our go-to framework.
I was able to achieve it with css but was hoping that would be a temporary solution.
Are there any plans to include a fullwidth/fluid layout option for content in GP anytime soon?
heres a link to some of the Beaver Builder pre built layouts to give an idea of what we are trying to achieve. Beaver Builder Full Width Layouts
Hi Tom I included a link [in the "website" subject] line to the tester site for example as you asked.
Please excuse the ugliness and the terrible look of things. I'm simply playing and testing in this example site I have shown you.
I agree with Russell, he makes the points and has the same point of view that I do and goals.
If you see the example from the link that Russell gave recently, and look at the sample called "Subscribe,"
We are simply speaking of full width sections as shown, but the content on the page constrained/controlled to [our arbitrary] width.
Russell mentioned how you can have the header and footer fluid/fullwidth and the content is set to max at a set width (with the slider control.) However his point was the content doesn't work the same.
I have not figured out yet how to manipulate the css to achieve what we both are looking for.
Furthermore, as I mentioned previously about the inline style override, I changed body .grid container max-width in the style sheet on line 987 to be exact. If you look at my site page called "Some Page" you will see that it gets overriden by whatever the slider would be set to in the customization section "layout".
Sorry I should have said address rather than link I have included for you Tom. My apologies for any confusion on anything!
My apologies again, that should be "line 897", not "987." Terrible sorry
Well Tom I'm so sorry again. I didn't expect you not to see the page called "Some Page" very simply.
If you go to the address I provided, you will see the home page. It is just more jumbled and with more showing but you should still see the body .grid-container being overridden as I mentioned. You will just have to look past more on that page.
Tom I'm so sorry again. I didn't expect you not to see the page called "Some Page".
If you go to the address I provided, you will see the home page. It is just full of ugly content but you should still see the body .grid-container being overridden as I mentioned.
Thanks
Russell - have you checked out our Sections add-on? It lets you create layouts very similar to the page you linked to.
If that's not what you mean, are you wanting an option that achieves the same thing as adding this CSS?:
.container.grid-container {
max-width: 100%;
}
new poster - The "Subscribe" template you're referring to could easily be creating using our Sections add-on. In fact, it's quite similar to what we have on our homepage here.
I'm not seeing any website/link you've added?
Let me know :)
Hi Tom,
Yes that's pretty much it mate.
I had used that and it works perfectly well but in the use case scenario I have where I have designers not developers creating landing pages for campaigns I would really like to see it as a customizer option so they can apply on the fly and change if required .
The thing I really like about GP aside from the clean code is that the customizer options are very strong in the header footer and general layout which when coupled with beaver builder for content layout make for a very good partnership.
Cool, so with the header and footer layouts - when you set them to Fluid, the inner containers still stay contained to your container width.
In this case with the content, that wouldn't be the case, correct? It would just make the entire content area fluid?
And this is different than setting the container width option to a high number because then the rest of the site's containers will also be super wide?
Just getting a good idea of the option :)
Hi all.
Sorry about that address Tom. Here: wwdev.digitalbranson.com
Anyway Yes! Thanks for that code. Russell is a step ahead of me and I had not figured that one out yet. You will still see how the 'body .grid-container' gets overridden by the customizer slider.
Russell is right on with my thinking!
We want to use the sections as you have them but then use beaver builder for content from the front-end as needed.
:)
Your new code is closer to what we are talking about.
Yes I think we are all getting on the path :)
"And this is different than setting the container width option to a high number because then the rest of the site’s containers will also be super wide?"
Yes we wish that the content settings would function similar to the header/footer fluid/full width-with the content inside those(header/footer) being set somewhat separately. :)
In that case, wouldn't you just set the site background color to the same color as the content area?
That would give the "illusion" of a full width area, but your content area would still be contained inside.
This CSS would make it so the content would go all the way to the edge of your browser:
.container.grid-container {
max-width: 100%;
}
Hey guys, jumping in here as I just purchased GeneratePress with the add-ons. I have a client who used beaver builder already. Upon researching GeneratePress I saw all the customizer options and assumed this was an option. I'm building her new site using GP and ran into the same problem as above. Although changing the CSS to the following does not give me full width rows:
.container.grid-container {
max-width: 100%;
}
Where is it getting overridden? Is there a fix while we wait for this to become a feature?