Archived topic
GP theme corrupts layout of WooCommerce shop page
5 replies · Started by James on November 23, 2021
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: 
Here's what the page looks like with Beaver Builder 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
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.
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.
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.
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.
You're welcome
