How to add padding above the Add to Cart button on Brooklyn theme for mobile visitors

[LilysCreative]

Hi,

I'm having trouble adding padding above the add to cart button on Brooklyn theme for mobiles. Now these buttons are placed right after product titles on the home page. I want to add some space above so that all add to cart button are on the same line.

I did some research and find the below code:

@media only screen and (max-width: 749px)
{
li.grid__item.grid__item--featured-collections.small--one-half.medium-up--one-quarter {
margin-bottom: 10px;
}

}

@media only screen and (max-width: 749px)
{

//new code for collection page:
li.grid__item.grid__item--collection-template.small--one-half.medium-up--one-quarter {
margin-bottom: 10px;
}

}

I tried to add these to theme.scss but they are not working.

Please let me know how to solve this problem.

Thank you!

Best,

Lily

[dmwwebartisan]

@LilysCreative 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

[LilysCreative]

Sorry it’s www.lilyscreative.com

[Natztech · Accepted solution]

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (max-width: 600px) {
  .grid-uniform .grid__item .grid-product__wrapper .grid-product__title {
    min-height: 60px ;
    display: flex;
    flex-wrap: wrap;
}
}

[LilysCreative]

Thank you so much! It worked on my homepage, but not on the "all product" page. I think it is because of the customer reviews. Do you mind taking a look? 

I wanted to put reviews on homepage anyway so if you can make rooms for them that would be great!

Thanks again!

[khilan · Accepted solution]

hi @LilysCreative 

i hope this work. please change this your code ..

@media only screen and (max-width: 600px) {
.grid-uniform .grid__item .grid-product__wrapper .grid-product__title {
min-height: 60px ;
display: flex;
flex-wrap: wrap;
}
}

thank you so much

[LilysCreative]

Hi Khilan,

Thank you! I think this is the same code dmwwebartisn posted. Can you please take a look at my all product page? the ATC button are still not lined up there.

Thanks!

[LilysCreative]

Now I changed my customer review settings and have them shown up on the homepage. And the code does not work anymore.

Can you guys take a look?

Thank you!!!