Align ATC Button

[TBS2023]

How can i align my add to cart buttons

I am using Impulse theme and

https://www.thebodyshop.iq/collections/tea-tree

riacia

[EBOOST]

Hi @TBS2023 ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Assets/theme.css
3. Add code below to end of file

#CollectionAjaxContent .grid.grid--uniform {
  display: flex;
  flex-flow: wrap;
}
#CollectionAjaxContent .grid.grid--uniform .grid-product{
  display: flex;
  flex-flow: column;
}
#CollectionAjaxContent .grid.grid--uniform .grid-product .grid-product__content {
  margin-bottom: auto;
}

[TBS2023]

great thanks - but now the prices are not aligned

[EBOOST]

Hi,

May I suggest code below to replace old code

#CollectionAjaxContent .grid.grid--uniform {
  display: flex;
  flex-flow: wrap;
}
#CollectionAjaxContent .grid.grid--uniform .grid-product{
  display: flex;
  flex-flow: column;
}
#CollectionAjaxContent .grid.grid--uniform .grid-product .grid-product__content {
  margin-bottom: auto;
  height: 100%;
}
#CollectionAjaxContent .grid.grid--uniform .grid-product .grid-product__content .grid-product__link{
  display: flex;
  flex-flow: column;
  height: 100%;
}
#CollectionAjaxContent .grid.grid--uniform .grid-product .grid-product__content .grid-product__link .grid-product__meta {
  flex-grow: 1;
  display: flex;
  flex-flow: column;
}
#CollectionAjaxContent .grid.grid--uniform .grid-product .grid-product__content .grid-product__link .grid-product__meta .grid-product__price {
 margin-top: auto;
 padding-top: 15px;
}

And I checked Assets/theme.css file. There are many errors.You can check screenshot below

[TBS2023]

Amazing - thank you

do you know how to align them on the "product recommendation’ section on product page

[EBOOST]

Hi,

You can add code below end of Assets/theme.css file

div[data-section-type="product-recommendations"] .grid.grid--uniform {
  display: flex;
  flex-flow: wrap;
}
div[data-section-type="product-recommendations"]  .grid.grid--uniform .grid-product{
  display: flex;
  flex-flow: column;
}
div[data-section-type="product-recommendations"]  .grid.grid--uniform .grid-product .grid-product__content {
  margin-bottom: auto;
  height: 100%;
}
div[data-section-type="product-recommendations"]  .grid.grid--uniform .grid-product .grid-product__content .grid-product__link{
  display: flex;
  flex-flow: column;
  height: 100%;
}
div[data-section-type="product-recommendations"]  .grid.grid--uniform .grid-product .grid-product__content .grid-product__link .grid-product__meta {
  flex-grow: 1;
  display: flex;
  flex-flow: column;
}
div[data-section-type="product-recommendations"]  .grid.grid--uniform .grid-product .grid-product__content .grid-product__link .grid-product__meta .grid-product__price {
 margin-top: auto;
 padding-top: 15px;
}

[TBS2023]

Hello

How to align the ATC button on collection page on Mobile view please?

[EBOOST]

Hi,

Code above included both Mobile & desktop. I checked your store. I saw code is missing a close tag for “@media screen and (min-width: 1020px)”

You try to find “@media screen and (min-width:1020px) {” in the Assets/theme.css after that remove it.