Aligning "Add to cart" buttons

New Member
2 0 0

Hello,

I am using "Qrack" theme and I am having an issue with the alignment of the "Add to cart" buttons. When the product title takes 1 line to display, the "Add to cart" button is displayed immediately below. However, when the product title is 2 lines, or 3, the button is displayed further down, which gives the collection pages an uneven look.

 

Just to get an idea how it works:

 

 

Can anyone suggest me a viable CSS fix to make every button aligned on the same row? Thank you for your time.

0 Likes
Excursionist
62 0 6

You need to set equal height js on title class.

If you need any more help then shoot mail at jaygandhi0692@gmail.com
0 Likes
New Member
2 0 0

Can you elaborate more on that?

0 Likes
New Member
12 0 0

Perhaps anyone found the solution?

 

Thank you.

0 Likes
Astronaut
835 95 178

You'd have to cycle through the containing elements (the title, the image, the price), see which is the largest, and then set all of them to the same height with jQuery or javascript. Here's a code pen example using jQuery(there is probably a better way, this is just what I came up with):

 

https://codepen.io/ninthony/pen/RwbMdNO

 

Here's the stackoverflow I pulled from:

 

https://stackoverflow.com/questions/6781031/use-jquery-css-to-find-the-tallest-of-all-elements

 

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
12 0 0

Hello @Ninthony,

 

Thank you for you response. 

 

In this case I do not need to align all the elements. I would like to have "ADD TO CART" button aligned to the bottom only. Here it is the screenshot of what I would like to have:

 

Capture.JPG

0 Likes
Astronaut
835 95 178

Yeah it's the same concept. I posted for all the elements because in the examples it looked like you had different sized product images and titles. In this case you would need to find the containing element that houses your titles and reviews and use JS to find which of those is the biggest, then set them all to that height

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes