How to fix add to cart button margin error?

Store Design
, , , , ,
1

Hi guys,

Need to fix The “Add to cart” button margins to be probley placed under product card. Also, adjust allover margings to avoid scroll bar. Bellow code given and a pic of the website.

Alliance_0-1671793610499.png
Alliance_0-1671793610499.png1290×669 205 KB

.product-card {
padding: 5px 5px; /* change product collectin padding value as you like Top and Bottom = 25px - Left and Right = 10px*/
}
#Collection {padding: 15px;}
#Collection .grid–view-items {margin-left: 0px;}
#Collection .grid–view-items .small–one-half {padding-left: 15px;}

#shopify-section-collection-template #Collection .grid–view-items{
display: flex;
flex-flow: wrap;
padding: 10px 30px 0;
margin-left: -45px;
margin-right: -30px
}
#shopify-section-collection-template #Collection .grid–view-items .grid__item {
margin-bottom: 35px;
}
#shopify-section-collection-template #Collection .grid–view-items .product-card {
display: flex;
flex-flow: column;
height: 100%;
margin-bottom: 0;
}
#shopify-section-collection-template #Collection .grid–view-items .product-card br{
display: none;
}
#shopify-section-collection-template #Collection .grid–view-items .product-card .product-card__image-with-placeholder-wrapper {
min-height: 70%;
margin-bottom: 10px;
display: flex;
align-items: center;
}

.product-card + form {
display: flex;
justify-content: space-between;
}
.product-card + form input {
width: 70%;margin-top: 15px;
}
.product-card + form input#quantity {
width: 25%; margin-top: 15px;
}

Thank you

allianceautoproducts.com

2

Hi,

Please use this for the button.
.pf-product-form button {
width: calc(100% - 20px);
margin: 0 auto 10px;
}

3

Hello @Alliance !

Hope you are doing well.

Try this CSS to make changes as you need:

iCart_App_0-1671794304952.png
iCart_App_0-1671794304952.png403×170 3.88 KB

iCart_App_1-1671794309077.png

iCart_App_2-1671794311108.png
iCart_App_2-1671794311108.png329×184 5.21 KB

After that your page will be like this:

iCart_App_3-1671794350609.png
iCart_App_3-1671794350609.png1258×772 162 KB

Hope this helps.

4

Hi,

Where to put it. Is it going to remove the scroll bar?

5

Hello @Alliance !
To remove the scroll bar you need to remove the overflow property from .grid–view-items in your theme.scss file.

iCart_App_0-1671795411886.png

6

But that will affect other pages, right? Talking about that page only. Might be margins activing that scroll bar.

7

Where to put it?

8

Also, how to reduce the gap between filter bar and products cards?

Thank you

9

It will affect the items in a grid. The margin is not activating the scroll bar. As overflow was set in CSS it was adding the scroll bar based on the page height.