[Support request] Inconsistently-sized images in WooCommerce from GP

[Ian]

I had initially thought this was an Elementor issue, but their tech support team has indicated the fault is with GP. (I could forward you their explanation if desired.)

The easiest way for me to explain this problem is to have you follow these steps to view the issue in the website:

Start here: https://bluebarnquiltco.com/fabric/
Click on the AGF Pure Solids category.
Look at the resulting page, noting that the colour blocks being displayed there are differently-sized – but they’re all made with graphic images of equal dimensions!
Go back to https://bluebarnquiltco.com/fabric/ and this time click on the Jelly Rolls category.
The source files of each of those three resulting graphics are the same dimensions, yet each is displayed at a different size!

The Elementor widget that effectively generates both of these pages is Edit Product Categories. But what I’ve learned from Elementor is that the resulting page comes from GP.

The obvious question is: How do I ensure all of the graphics appear as the same size?

[David]

Hi there,

there isn’t room for 6 columns – if you add an item to the cart, the 6th column will overlap the right sidebar cart widget.

Try reducing columns to 5 and reduce the Column Gap to 20px.

Let me know.

[Ian]

So close, but not quite there yet…

Your fix – which I applied at Customize > Layout > WooCommerce – definitely fixed the listing of the AGF Pure Solids items. Unfortunately, the Jelly Rolls display just as they did before – in three different sizes! Why this would apply to one of these and not another is a mystery to me – and that I hope you can help solve!

[David]

Aah – so thats because of the ‘long’ word ie. Pink/Orange/Yellow it cannot wrap to a new line so the Item container expands to accommodate it.

Options:
1. Edit the product title and introduce some spaces between colors.

OR

2. CSS Fix:

.woocommerce ul.products li.product .woocommerce-LoopProduct-link h2 {
    word-break: break-word;
}

[Ian]

Thanks for all of the help here, David. I ended up not using your code and editing some product names and making the font size of those products smaller.

[David]

I agree that is the better solution. Glad to be of help

[Author]

Posts