Horizontal align <add to cart> button

  • Posts: 27
  • Thank you received: 0
  • Hikashop Business
3 years 10 months ago #329636

-- url of the page with the problem -- : shop.hansplanje.nl/category/28-nieuw
-- HikaShop version -- : 4.4.0
-- Joomla version -- : 3.9.24
-- PHP version -- : 7.3
-- Browser(s) name and version -- : FireFox

Hi,

How can I align the button <add-to-cart> on one line with 4 columns in the product list display?

Same question for the # items in stock.

Reason is that the lines for the product text is variable.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 4760
  • Thank you received: 647
  • MODERATOR
3 years 10 months ago #329645

Hello,

As a start you can try with height consistency option, see my screenshot :

alt


And/or add some custom Css in order to adjust this, have a look on this documentation to see how to add some custom Css.
Hope this will help you to achieved what you needed.

Regards

Last edit: 3 years 10 months ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 27
  • Thank you received: 0
  • Hikashop Business
1 year 4 months ago #354103

Hi,

It has been a while, but I still have the same issue here.
We now use Joomla 4 and Flex and CSS grid shoud have the solution to put the button in the right place.

Have you some more information on how to realise this?

Kind regards

Please Log in or Create an account to join the conversation.

  • Posts: 4760
  • Thank you received: 647
  • MODERATOR
1 year 4 months ago #354108

Hello,

We need to see by ourselves the context because display issue can have tons of different reason.
Can you provide an Url link?

Regards

Please Log in or Create an account to join the conversation.

  • Posts: 27
  • Thank you received: 0
  • Hikashop Business
1 year 4 months ago #354135

sure.

the website is shop.hansplanje.nl
it concerns most of the product pages where there are different number of lines in the product name.

Please Log in or Create an account to join the conversation.

  • Posts: 83007
  • Thank you received: 13400
  • MODERATOR
1 year 4 months ago #354139

Hi,

I think Philippe didn't understand exactly what you wanted 2 years ago.
The problem is not a grid problem either.
It's a matter of CSS to align an element at the bottom of another parent element:
stackoverflow.com/questions/585945/how-t...-a-div-to-the-bottom

For example, such CSS:

.hikashop_products_listing a.hikabtn.hikacart {
    position: absolute;
    bottom: 0;
    left: 20px;
}
But there are other ways, like :
.hikashop_listing_img_title {
    display: grid;
    height: 420px;
}
Or with flex:
.hikashop_listing_img_title {
    display: flex;
    flex-direction: column;
    height: 420px;
}
.hikashop_listing_img_title a.hikabtn.hikacart {
    margin-top: auto;
}
These are basically taken from propositions on this link.

This would have been the same 2 years ago on Joomla 3.

Please Log in or Create an account to join the conversation.

Time to create page: 0.078 seconds
Powered by Kunena Forum