Add to cart button alignment

-- HikaShop version -- : 4.4.0
-- Joomla version -- : 3.9.24
-- PHP version -- : 7.4
-- Browser(s) name and version -- : Firefox 85.0.1

Hi,
How can i align the add to cart button as show on the attached screenshot.
Height consistency is already activated but as product titles have varying lengths it causes some issues.
I would like the button at a fix space from the bottom of the cell.
Thanks in advance

Hi,

You can do it by adding custom CSS.
For example:
stackoverflow.com/questions/585945/how-t...-a-div-to-the-bottom
A good start: www.hikashop.com/support/documentation/1...ize-the-display.html

Thanks Nicolas, a good start effectively.
The button goes down with the provided CSS but i'd like to keep it 2 or 3 px from the bottom.
However, the button now is totally off center and even out of the container (See enclosed)
I turn around to see if i can find the right part to edit but have no success.
I'll appreciate if you can help me again on that
Thanks in advance

Hello,

The most simple way, will be to add some left command, AND adjust the bottom value like this :
Where "bottom: 10px;" & "left: 75px;" are value exemple, you will have I guess to adapt this value to fit your needs.
Hope this will help you to solve this.

Regards

Thanks Mohamed, i adjust the values and yes it works great, the "add to cart" buttons are aligned and now centered within the cells.
However, in some cases, the product code & the qty available are covered by the add to cart button (see enclosed)
I try to edit the product "name" with a very long title, it works to a certain extend as all the cells on the same page expends accordingly, but this means that in every pages at least 1 cell still looks weird in order for all others to look ok.
So is there a way to push down the add to cart buttons and expend the cells accordingly?
Is there a way to determine a specific height for the cells (3 columns layout) instead of variable?
Thanks in advance

Hi,

Yes. You just need to increase the height of the div of the cell.
For example, with such CSS:

Thanks Nicolas, it works like a charm!!!