How can I fix add to cart alignment issues on my website?

[MrGadgets]

Hi,

I do know and understand that this topic has been covered a lot of times, but unfortunately my theme seems to differ a little to others.

In the long run I will go ahead and get a premium theme regardless to get some more needed features covered, but In my eyes the shop will need to prove itself first 😛

To my problem the add to cart alignment is shocking no matter where if its on the Homepage or collection page 😄

Thats one example not the worst one I myself get dissy going over the page 😄

when I check on the community Board I see that most people just simply add some code to :

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

Please see my screenshot I don't seem to have the selection and I tried copying the code in to the styles.css and styles-responsive.css which didn't help it unfortunately. 

Website to check for this problem: www.coolgadgets.site 

Please let me know how I can sort that problem to tick it of my to do list 😄

Thanks you everyone 🙂

@Anonymous 

[Dbuglabpvtltd]

Hi @MrGadgets 
You can add that code in these files

[MrGadgets]

Hi @Dbuglabpvtltd 

I went ahead and added this code:

.grid__item--collection-template {
margin-bottom: 30px;

.product-card__title {
    min-height: 50px;
    display: block;
}
form {
text-align: center;
}
.btn {
    margin-top: 10px;
}
}

which is the one I found to booth the categories as mentioned, but if you go back on my site:
www.coolgadgets.site you can see that they are still all over the place.

Am I using the wrong code or would there be another solution to the Problem.
Thank you,
Andre
 

[Sajeel]

@MrGadgets  there is wishlist button after add to cart button thats why your code is not working

[MrGadgets]

@Sajeel  would there still be a way around it since I actually would like to keep the wishlist function 

[Sajeel]

i think you need to show wishlist button without hover also then it will look nice and then you can align the text center

[MrGadgets]

okey thank you I will see that I check that out

[MrGadgets]

I still haven't been able to align the damn add to cart and its been really annoying. Please who could help me with that I'm really lost at this stage....

Website. www.coolgadgets.site

[Sajeel]

how you want to align them? add to cart is aligned perfectly the issues is there is a wishlist heart which appears on hover

[MrGadgets]

That's not were the issues is the problem is within the heights.

You see some show reviews some don't.

Some have color options some don't.

So if you look at it especially on the collection page you see its all over the place and I would like to have them all in a straight line.

See the Screenshot attached the first 2 line up perfectly.

The 3rd one got no color option so it sits higher.

The 4th one has reviews aswell so sits a bit lower.

Since they will all get reviews eventually the goal is to line the add to cart button all at the same height as the 4th one.

That would help to make the website look much cleaner...

[Sajeel · Accepted solution]

@MrGadgets  add this code in theme-style.css

.product-item .product-bottom {height:203px;

align-items: end;

display: grid;

}

[MrGadgets]

That did the trick awesome thank you so much I really appreciate that a lot 🙂

[Sajeel]

Thanks

[MrGadgets]

@Sajeel 

Hey I just noticed that it created another problem only on the products with reviews it started overlapping now.

im using the judge.me with the aliexpress review importer on that

[MrGadgets]

Sorted it 🙂

[Sajeel]

Let me check

[Sajeel]

@MrGadgets  it looks fine. on which device you are facing the issue?

[MrGadgets]

I just worked it out I had to go with a height of 260 rather then 203 that's why it was overlapping its perfect now and looks much cleaner thank you. 

[Sajeel]

perfect

[Sajeel]

on which devcie you are facing issue