Related Products - Add to cart Aligning problem

Store Design
1

Hi,

I’ve a problem about aligning add to cart buttons on related products section.

It can be seen on here as an example. or on the image below.

What should I do to get all the add product buttons in one line?

sezyez_0-1649077262849.png
sezyez_0-1649077262849.png1006×442 96.4 KB

1 Like
2

Hi @sezyez ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme-styles.css->paste below code at the bottom of the file:
.product-title, .product-name {
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
3

Hello @sezyez ,

Please follow the below steps…

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme-styles.css->paste the below code at the bottom of the file:
button.btn.add-to-cart-btn.btn-two
{
       min-width: 100% !important;
       text-align: center !important;
       font-size: 13px !important;
}

I hope it will work for you!!

4

@AvadaCommerce

.product-title{
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}
.product-name {
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

Add this code in the bottom of the theme-styles.css

1 Like