Centering of text/images in collection (Warehouse)

Store Design
, , ,
1

Hi,

I am experiencing misalignment of product text and images within the collection pages.

I have tested previous solutions but it seems to change the formatting of the text set up on the individual products.

I am assuming its most likely due to the size of the images or the length of the product title but is there any custom code / CSS that I can use to center the product images within the grid?

Any help is greatly appreciated!

Capture.PNG
Capture.PNG1011×418 95.7 KB

2

Hello @Kenton2

Please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution.

3

https://shopthruway.myshopify.com/

4

Hello @Kenton2

It is dependent on the size of your images. If all your uploaded images are of the same size, you won’t encounter this issue.

5

Thanks for the reply. I am aware of that. At this point I have thousands of uploaded images and resizing each one is not an option, at least not at this point. I am sure there is a CSS code in the theme that can allow for uniform centering of the images within the collection grid so they all appear uniform.

6

Hello @Kenton2

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

but the image is stretched so you need to add the proper size image that is rendered to be 230x230px.

.aspect-ratio {
    padding-bottom: 100%;
}