[Support request] ongoing issues with GP / Beaver Themer compatibility

[James]

Hi – hope you can help with this.

I’ve found another problematic area with using both GeneratePress and Beaver Themer on a WooCommerce site.

If you go to this page https://gv.perfectlydigital.dev/product/_test-product-1/ and click ‘Add to basket’ then the View Cart message is shoehorned in before the product column. When I open up dev tools to inspect I see this from the GP stylesheet:

.site-content {
display: flex;
}

Disabling that, or even just adding ‘flex-wrap: wrap;’ resolves it, but I don’t know if this is the best solution. Obvioulsy I don’t want to edit the GP stylesheet otherwise I lose that when you next release an update. So what’s the best solution?

FYI, I had a previous issue with Themer and GP as detailed in this ticket (https://generatepress.com/forums/topic/gp-theme-corrupts-layout-of-woocommerce-shop-page/#post-2018011). So I’ve already got this snippet in place:

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

Do I need to amend that, or is it something new?

Thanks

[David]

Hi there,

Well thats a pain – maybe as per your last post its better to make the site-content container a block.
You could use this, so presumably when BB Theme builder is at play its going to strap one of the fl-theme-* classes to the body:

body[class*='fl-theme-builder'] .site-content {
    display: block;
}

It works, but not sure if this will avoid breaking any non BB built pages….

[James]

Thanks David, that’s helpful. Two follow up questions if I may.

Presumably with the css you posted above I now no longer need the snippet from the previous post:
.fl-builder-content {
flex: 1 0 100%;
}

What do you mean by making the site-content container a block? I’m actually pretty new to GP – only using it for the first time on this site due to WooCommerce functionality. So I’m not entirely sure what you mean. Do I need to have GenerateBlocks installed? Are you talking about block elements as per this article: https://docs.generatepress.com/article/block-element-content-template/

Thanks again

[David]

Yes you can remove:

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

Sorry what i should have said is set the site-content to display: block;

[Author]

Posts