- This topic has 36 replies, 5 voices, and was last updated 9 years, 2 months ago by
Tom.
-
AuthorPosts
-
October 6, 2015 at 11:53 pm #142470
Tom
Lead DeveloperLead DeveloperIt 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?
October 7, 2015 at 12:31 am #142476Russell Masters
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
October 7, 2015 at 8:11 am #142571new poster again
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”.
October 7, 2015 at 8:34 am #142578new poster again
Sorry I should have said address rather than link I have included for you Tom. My apologies for any confusion on anything!
October 7, 2015 at 8:46 am #142581new poster again
My apologies again, that should be “line 897”, not “987.” Terrible sorry
October 7, 2015 at 8:54 am #142582new poster again
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.October 7, 2015 at 9:01 am #142583new poster again
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.
ThanksOctober 7, 2015 at 10:17 am #142589Tom
Lead DeveloperLead DeveloperRussell – 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 π
October 7, 2015 at 10:57 am #142608Russell Masters
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.
October 7, 2015 at 11:02 am #142610Tom
Lead DeveloperLead DeveloperCool, 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 π
October 7, 2015 at 11:04 am #142613new poster
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.
πOctober 7, 2015 at 11:07 am #142617new poster
Your new code is closer to what we are talking about.
Yes I think we are all getting on the path π
October 7, 2015 at 11:16 am #142620new poster
“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. π
October 7, 2015 at 11:30 am #142624Tom
Lead DeveloperLead DeveloperIn 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%; }
October 19, 2015 at 11:51 am #145759Wayne
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?
-
AuthorPosts
- You must be logged in to reply to this topic.