FROM CACHE - en_header

How to Increase Space Between Products in Featured Collections (Debut Theme)

Solved
prankoyz
Tourist
10 0 0

Hi there!

I've searched as much as I could but didn't see a solution for my problem.

 

URL: https://consistent-home-delivery.myshopify.com/
Theme: Debut
Problem: I added a QTY and Add to Cart button on my featured collections page but now I want to increase the space between the add to cart button and the product not associated with it to avoid confusion. Please see attached picture.

Screenshot 2020-04-15 07.29.02.png

Thank you very much!

Accepted Solution (1)

Accepted Solutions
oscprofessional
Shopify Partner
12515 1931 2478

This is an accepted solution.

Hello ,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.grid__item.grid__item--collection {
    padding-top: 40px !important;
}

 

Add this css for more design:

.grid__item--collection .btn { 
padding-top: 5px;
 }
 .grid__item.grid__item--collection { 
text-align: center;
 }
 .price.price--listing {
 text-align: center; 
align-items: center; 
}
.grid__item--collection #quantity {
    width: 30%!important;
}
Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing

View solution in original post

Replies 5 (5)
oscprofessional
Shopify Partner
12515 1931 2478

This is an accepted solution.

Hello ,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.grid__item.grid__item--collection {
    padding-top: 40px !important;
}

 

Add this css for more design:

.grid__item--collection .btn { 
padding-top: 5px;
 }
 .grid__item.grid__item--collection { 
text-align: center;
 }
 .price.price--listing {
 text-align: center; 
align-items: center; 
}
.grid__item--collection #quantity {
    width: 30%!important;
}
Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
prankoyz
Tourist
10 0 0

Hi oscprofessional!

Thank you so much for your help! I used the 2nd code and it looks so much better now! 

prankoyz
Tourist
10 0 0
ompatel001
New Member
1 0 0

Hey! In my Debut Theme, There's no file in the name of "theme.scss.liquid". So I created one & Used these codes but did not work so I deleted the newly created file & unfortunately shop shows blank page now. Please Help 

opticalboutique
New Member
1 0 0

Can you please help me with this?