Why are my 'buy now' buttons not aligned on my homepage?

Technical Q&A
1

Hello! Hope to get my problem resolved here. As you can see in our homepage the buttons “add to cart” or in our language “IELIKT GROZĀ” jums up and down. How can I get them all in one row?

https://kindershop.lv/collections/visas-bibs-preces

2

@kindershop

Issue is coming because your products have you have different length of title and in few case image dimensions.

uneven Image dimension

hari1_prasad_0-1673080384012.png
hari1_prasad_0-1673080384012.png1366×768 142 KB

Uneven title

hari1_prasad_1-1673080460128.png
hari1_prasad_1-1673080460128.png1366×768 138 KB

Solution

To resolve the issue few things you can done.

  1. Work on product title length and image dimension

  2. To fix it in this state paste below CSS code in theme CSS

  3. From Shopify dashboard, go to Online store > Themes > Edit code

  4. In the search box, search for .css or .scss file name should be named as theme.css, base.css, base.scss

  5. Scroll to the very end of this file, and paste this code:

#Collection .grid--view-items{display: flex;flex-flow: row wrap;}
.grid__item--collection-template {padding-bottom: 35px; position: relative;}
.grid__item--collection-template > form {position: absolute;left: 0;right: 0;bottom: 0;padding-left: 22px;}

Hope it help! Stay connected…