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

Solved
LilysCreative
New Member
8 0 0

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

0 Likes
dmwwebartisan
Shopify Partner
5796 1327 1699

@LilysCreative 

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

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
LilysCreative
New Member
8 0 0

Sorry it’s www.lilyscreative.com

0 Likes
Natztech
Shopify Partner
616 165 413

This is an 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;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
LilysCreative
New Member
8 0 0

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!

0 Likes
khilan
Trailblazer
176 11 22

This is an 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

Shopify Expert | Skype: khilan.mendapara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on khilan.mendapara1995@gmail.com regarding any help
0 Likes
LilysCreative
New Member
8 0 0

Hi Khilan,

 

Thank you! I think this is the same code dmwwebartisn 

 

0 Likes
LilysCreative
New Member
8 0 0

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!!!

0 Likes