Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Page Title Left Aligned with Beaver Builder Plugin

Home Forums Support Page Title Left Aligned with Beaver Builder Plugin

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #164593
    Philip

    I am having problems with a number of my websites that are using the Beaver Builder plugin with the Generatepress Theme Plugin. The H1 Page Title on all pages is not aligned with the content box. It is aligned furthest left for some reason.

    This problem occurred a few weeks ago and does need to seem to have been resolved with any updates so not sure if it is a Generatepress or Beaver Builder conflict?

    All the pages that I am not using the Beaver Builder plugin on have the H1 page title within the content area (correctly aligned).

    Hope you can help with this problem as I love this combination.

    Thank you and keep up the good work.

    #164602
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Can you link me to a page where this is happening?

    Thanks! 🙂

    #164603
    Philip

    Hi Tom

    Yes you can find the problem on the homepage at http://www.aquilapartnership.org.uk

    I also have a number of other websites with the same consistent problem.

    If you need admin access then please let me know.

    • This reply was modified 4 years, 10 months ago by Philip.
    #164607
    Tom
    Lead Developer
    Lead Developer

    Can you give this CSS a try?:

    .fl-builder .entry-header {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }

    Adding CSS: https://generatepress.com/knowledgebase/adding-css/

    #164613
    Philip

    Hi Tom

    Thanks for your fast reply.

    This resolves the alignment of the page title but the content area box is still the max width of the screen size.

    I have tried a similar solution to yours on a different website but with the following code:

    .inside-article {
    max-width: 1030px;
    margin: 0 auto;
    }

    This resolves the issue but why is this workaround required?

    It seemed to happen when either Beaver or Generatepress was updated at some point as I have been using both together for over a year.

    Thanks for your help so far 🙂

    #164667
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This happens because Beaver Builder lets you choose whether to have a fixed or fluid layout.

    If GP doesn’t set the width of the page to 100% when BB is activated, the fluid layouts won’t work.

    Kind of a tough situation, but the majority of people use page builders to build full width layouts, so the method I took kind of caters to that.

    Let me know if you need more info 🙂

    #172779
    Catherine Pelonero

    Hi Tom,

    I’m having the exact same problem with Beaver Builder – the page title is aligned furthest left instead of over the content box and the content area box is the max width of the screen instead of aligned like it should be. I installed and activated your simple CSS plugin and I tried pasting in this code to fix the page title alignment:
    .fl-builder .entry-header {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    }

    It didn’t work for me, but perhaps I didn’t paste in the right place (again!)

    To let you know exactly what I’m trying to do, this page on my site is exactly how I want the pages to look: http://www.catherinepelonero.net/formal-bio/

    This is how the page looks that I made with Beaver Builder: http://www.catherinepelonero.net/representation/

    Like the person who started this thread, I also love the combination of GeneratePress and Beaver Builder so I’m really hoping there’s a way to resolve this. Please let me know the best way to fix, and if there’s a global fix or whether I need to insert or alter something on any pages created with Beaver Builder.

    Thanks for all you do!

    #172784
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Do you have any full width beaver builder pages?

    The issue here is most people using page builders to build full width layouts, but BB doesn’t give us theme developers any hints whether full width is enabled or not.

    So by default, we make the container full width when BB is enabled on the page, and then leave it up to the user to choose full width or contained.

    However, in situations like this, you’re using BB for one little part of your content without your contained content area.

    So to make your area contained again, you would do this:

    .fl-builder .container.grid-container {
        max-width: 1200px;
    }

    However, that will do it site-wide, so if you have any full width layouts, it will contain them.

    To make the container contained only on this one page, you would grab the page ID (275 in this case), and do this:

    .page-id-275.fl-builder .container.grid-container {
        max-width: 1200px;
    }

    Let me know if you need more info 🙂

    #172785
    Catherine Pelonero

    Yes! That did it! You are a genius, Tom, thank you!

    And I wanted the change to be site-wide so that fix was perfect.

    #172787
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.