[Resolved] GP theme corrupts layout of WooCommerce shop page

Home Forums Support [Resolved] GP theme corrupts layout of WooCommerce shop page

Home Forums Support GP theme corrupts layout of WooCommerce shop page

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2017544
    James

    Hi – I have a site that I’m building where I’m experiencing an issue with how GeneratePress interacts with WooCommerce. I would like to use GeneratePress theme, but the layout of the shop page becomes corrupted when I have the GeneratePress theme activated – see here: https://staging.gv.perfectlydigital.dev/shop/. The layout of the page changes from the standard width column within a row to a very narrow one, and it is not possible to get the row to display correctly.

    I’m using BeaverBuilder and BB Themer to create a simple archive page for the shop, and GridBuilder to display the products. No other plugins are active. All plugins and themes are latest versions.

    If you change the theme to Beaver Builder theme then it displays fine.

    Here’s what the page looks like with GeneratePress Theme: shop with GP theme

    Here’s what the page looks like with Beaver Builder Theme: shop with BB theme

    I can’t figure out what is causing this – especially as it displays fine when using Beaver Builder theme.

    What has caused this? How can I fix it?

    Many thanks
    James Burden

    #2017555
    David
    Staff
    Customer Support

    Hi there,

    hmmm… odd one. What happens if you try adding this CSS:

    .fl-builder-content {
        flex: 1 0 100%;
    }

    Make sure to refresh the page after adding the CSS, so the Masonry script layout does its recalculations.

    #2017604
    James

    Hi David – thanks so much for the quick response. Much appreciated.

    Yes, that fixes it. Is it normal that I should need to do this when switching to GP Theme when using Beaver Builder and Themer? I’m not sure I understand why this should be necessary. It’s great that it fixes it, but is this a level of incompatibility between BB and GP?

    Thanks again.

    #2017635
    David
    Staff
    Customer Support

    The Theme uses Flexbox in its #content container.
    If children of that container eg. fl-builder-content has no width then the #content container can collapse.

    the fl-builder-container has neither an explicit or implicit width. It has no implicit width as its contents ( product grid ) is using absolute positioning for its masonry script.

    So in these cases yes, it would require that little CSS to fix the problem.

    #2017669
    James

    Ah, thank you. That makes sense. Thanks for the explanation – that will really help with understanding where I might need to use this in the future.

    #2018011
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.