How to align product image and information display on collection pages?

[gayled]

We are using turbo-portland theme, how do we fix the size of the products so that they all display in the same size box, as we have different title sizes and image size so this can effect how the products align on the collection page.

[Made4uo-Ribe]

Hi @gayled

Would you mind to share your store URL? Thanks!

[gayled]

thanks its

Access Models - The UK’s leading Models and Hobbies Store

[PageFly-Henry]

Hi @gayled

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file styles.css

Step 3: Paste the below code at bottom of the file → Save

[itemprop=“name”] {

min-height: 60px !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[Made4uo-Ribe]

Thanks for the info, check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.product-list .thumbnail, .slider-gallery .thumbnail, .list-collections .thumbnail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[gayled]

thank you for your help!, so this seemed to work, except for the first product on the page!

do i need to add anything else?

[gayled]

I have managed to get most of the products aligned on the collections page, however, the first product on every page is slightly out of alignment.
RC Aircraft - Access Models

its the same on every collection page.

[gayled]

this is now resolved, the issue was caused by the trust bear badges app, we have uninstalled and its fixed it, thanks @Made4uo-Ribe