Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Full Width instead on Boxed Layout

Home Forums Support Full Width instead on Boxed Layout

  • This topic has 36 replies, 5 voices, and was last updated 5 years ago by Tom.
Viewing 15 posts - 16 through 30 (of 37 total)
  • Author
    Posts
  • #142470
    Tom
    Lead Developer
    Lead Developer

    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?

    #142476
    Russell 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

    #142571
    new 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”.

    #142578
    new poster again

    Sorry I should have said address rather than link I have included for you Tom. My apologies for any confusion on anything!

    #142581
    new poster again

    My apologies again, that should be “line 897”, not “987.” Terrible sorry

    #142582
    new 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.

    #142583
    new 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.
    Thanks

    #142589
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #142608
    Russell 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.

    #142610
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #142613
    new 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.
    πŸ™‚

    #142617
    new poster

    Your new code is closer to what we are talking about.

    Yes I think we are all getting on the path πŸ™‚

    #142620
    new 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. πŸ™‚

    #142624
    Tom
    Lead Developer
    Lead Developer

    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%;
    }
    #145759
    Wayne

    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?

Viewing 15 posts - 16 through 30 (of 37 total)
  • You must be logged in to reply to this topic.