How can I align images in my collection properly?

Store Design
1

My images aren’t lining up in my collection. How can I fix it? Website is www.jsbuildcompany.com

jsbuildco_0-1666127532532.png
jsbuildco_0-1666127532532.png1773×877 143 KB

2

Hi @jsbuildco

Thank you for the screenshot as well as the link to your store for us to look at. I can see when inspecting the product grid on the collection page that products with names that cross two lines are pushed into the next row of products.

I can also see that the product images are not of consistent sizes, which can also be adding to this.

I would recommend editing the product images to be of the same aspect ratio so that they line up more neatly. For the theme and the padding around the product listings, that may require shortening your product titles or having someone edit the theme code to adjust the space between the rows.

18-00-87094-75931
18-00-87094-75931963×808 351 KB

3

Thank you! Any tips on how I can work on the spacing between rows to accomodate for the additional line of text in the titles?

4

@jsbuildco

oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.products-list {
    display: flex;
    flex-wrap: wrap;
}
5

Thank you so much! That finally did it!!