Alignment of collection items and spacing of the add to cart button

Solved
Untainted
New Member
7 0 0

Hi, could anyone help me out with this. I've tried adding codes from the Shopify discussion forums from previous answers to this problem. 

My collection list doesn't look uniformly aligned and the spacing between add to cart button and the image below is 0. Attached is a screenshot from the website as an example. 

Untainted.caUntainted.ca

Website is Untainted.ca 

 

0 Likes
Quyen_Beo
Explorer
58 7 12

The issue is that you have item which showing sale badge and item not showing sale badge

For quick solution (not the best), you can use this css
.price__badges--listing { min-height: 19px; }

 

For the best solution, you can hire a developer to do it for you because it take a bit time

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
0 Likes
Untainted
New Member
7 0 0

Thank you for replying. However, I added the code but nothing changed. 

0 Likes
Quyen_Beo
Explorer
58 7 12

Where do you put that line of CSS?
You should put that on bottom of your theme.scss.css or theme.scss.liquid file

So it will show up like this

Quyen_Beo_0-1618418283308.png

 

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
0 Likes
Untainted
New Member
7 0 0

I had added it in theme.scss.liquid but it doesn't work. I think you have taken a screenshot from the homepage - Trending Now. Could you do the same on one of my collection pages and let me know if it works?

0 Likes
Quyen_Beo
Explorer
58 7 12

It should work for both homepage & collection page. I just check but seem like you didn't add it to the style file in a correct way. On frontend I didn't found that line of CSS.

You should try again and it looks kind like this on the style file.

Quyen_Beo_0-1618419590240.png

 

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
0 Likes
Untainted
New Member
7 0 0

I had deleted it once I saw that nothing changed. I am not well versed in HTML or CSS and didn't know if that would change anything anywhere else. I'll add it again and send you a screenshot. 

0 Likes
Untainted
New Member
7 0 0

Screenshot 2021-04-14 at 11.43.43 PM.pngScreenshot 2021-04-14 at 11.44.14 PM.png

0 Likes
Quyen_Beo
Explorer
58 7 12

This is an accepted solution.

Ah, that line of code only align the add to cart button.

To make the spacing between above and below product, you should also add this line to bottom of that file

.template-collection .grid--view-items .grid__item {margin-bottom: 30px;}

After that it should looks like this

Quyen_Beo_0-1618453762594.png

 

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me
Untainted
New Member
7 0 0

Thanks for that, it worked

0 Likes