Align add to cart buttons

[aromaticaparfum]

This is my website: aromaticaparfums.com 

The file is product-list.liquid

currently it’s like the one on the left, I want it aligned like the right 

 

please help 

[DaisyVo]

Hi @aromaticaparfum 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

button.btn.add-to-cart-btn {
    margin-left: calc(100% - 120px) !important;
}

Here is the result: https://prnt.sc/XjL8G-qYxPdL

I hope this helps

Best,

Daisy

[aromaticaparfum]

No. This is not what I wanted. I wanted all the add to cart buttons to be in a single line like this: - - - -

your code makes it: - _ - _ 

[DaisyVo]

Hi @aromaticaparfum 

Please try this code 

.collection__grid-loop.product__list-carousel .flickity-slider .product-index .product-info {
    height: 100px !important;
}
.collection__grid-loop.product__list-carousel .flickity-slider .product-index .product-metafields {
    height: 140px !important;
}

Here is the result: https://prnt.sc/8qaRTClZF4No

I hope this helps

Best,

Daisy

[aromaticaparfum]

Great job but can you make it such that retail price is also aligned just like the cart? 

 

[DaisyVo · Accepted solution]

Hi @aromaticaparfum 

Please add this code more in the same position 

.collection__grid-loop.product__list-carousel .flickity-slider .product-index .product-metafields > p:nth-child(2) {
    height: 72px;
}

Here is the result: https://prnt.sc/gep-YTN0dHEP

Best,

Daisy

[aromaticaparfum]

You are awesome but can you help decrease this big space in the middle between inspired by and retail price? 

 

[tim]

You can try code like this, either in "theme settings"=>"Custom CSS" or in "Custom CSS" of each section:

.product-index {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.product-index > :last-child {
  margin-top: auto;
  align-self: center;
}

Note:

You have problems with first item on collection pages -- must be HTML error -- browser removes the form tag (it exists in original HTML, but browser ignores it). If you click cart button there it does nothing.

I believe it's because of the <form id="main-collection-form"> line -- this should be removed.

HTML does not allow nesting forms, so when browser sees the <form> tag of the first product card it ignores it, but uses it's </form> tag to close the main-collection-form.