Align add to cart button Retina Theme

[Mentorpublish]

Hi,

Is it possible to align the add to cart button from different products to the same height? 

Here is my website: https://1cabe3-26.myshopify.com/

Thank you.

[tim · Accepted solution]

In theme customizer, go to Theme Settings, find "Custom CSS" and add the following code:

.product-thumbnail, .product-thumbnail__info {
  display: flex;
  flex-direction: column;
  flex-grow:1;
}

.product__form {
  margin-top: auto;
}

Or, can use "Custom CSS" in product grid sections settings

[niraj_patel]

Hello @Mentorpublish 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 .product-thumbnail__header {
      height: 3.5rem;
  }
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[tim · Accepted solution]

In theme customizer, go to Theme Settings, find "Custom CSS" and add the following code:

.product-thumbnail, .product-thumbnail__info {
  display: flex;
  flex-direction: column;
  flex-grow:1;
}

.product__form {
  margin-top: auto;
}

Or, can use "Custom CSS" in product grid sections settings

[Mentorpublish]

Hi @tim ,

Thx for the solution, it worked perfectly.

[Mentorpublish]

Hi @tim ,

Sorry to bother again, just found out if I change the product card from "Grid" to "Slideshow", then the alignment of add to cart will be gone, do you know how to solve this issue?

Thank you very much.

[tim]

Try adding 

.product-thumbnail {
  height: 100%;
}

[Mentorpublish]

Hi @tim ,

Try it, show like this:

[tim · Accepted solution]

Yeah, sometimes it happens when you have no access to the source code...

Try this instead:

.product-thumbnail {
  min-height: 100%;
}

[Mentorpublish]

Hi @tim ,

Oh this code worked, thank you very much.