Solved

Remove line spaces between "Highlighted Collections" and "View All" button in Debut theme

MochiMakes
New Member
7 0 0

Hi there, paid subscriber here. 

I want to remove the giant white gap between the "highlighted collection" strip of products and "view all" button so it's less scrolling for my customer and also makes it more obvious what the "view all" button leads to. I have 2 collections highlighted with view all buttons that need spacing corrected. Spacing between sections in general in the Debut theme is too much IMO. 

Please help! 

 

screencapture 2021.09.20.PNG

Accepted Solution (1)
dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@MochiMakes 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 750px){
.template-index hr {margin: 15px 0 !important;}
.template-index .index-section {padding-top: 20px;padding-bottom: 20px;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 6 (6)

Zworthkey
Shopify Partner
5581 642 1565

hii, @MochiMakes 
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

MochiMakes
New Member
7 0 0

HI there thanks for your help: 

URL: https://mochimakes.myshopify.com/

pw: MochiMakes123!

dmwwebartisan
Shopify Partner
12280 2546 3693

@MochiMakes 

Please share stor URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MochiMakes
New Member
7 0 0

In general I want to be able to short ALL the spaces between sections. It's too much white empty space for me. Is there also a way to make the "image with text" image smaller too?

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@MochiMakes 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 750px){
.template-index hr {margin: 15px 0 !important;}
.template-index .index-section {padding-top: 20px;padding-bottom: 20px;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MochiMakes
New Member
7 0 0

There is still a big gap at the bottom of the page between the bottom and the "image beside text" section. Is there similar code I can use to also shrink that specific area?