Solved

Remove space between sections (Showcase Theme)

myapparelsuk
Excursionist
21 0 8

Hi Friends,

 

I am currently using the Showcase theme. Can someone please advise how to reduce the white space between the sections? For example, the gap between Slideshow and Collection list section. If it needs to be adjusted for each section, I would also like to do the same after the featured items and collection section, and before/after the video and between footer and above footer sections and between products on collection pages. Here is my store homepage link. My Apparels Bridal Studio 

 

Thanks in advance.

 

Note: I marked on screenshot where I want to reduce space on my homepage.

My Apparels Bridal Studio | You Dream, We Deliver
Accepted Solutions (2)

iCart_App
Shopify Partner
479 57 103

This is an accepted solution.

Hello @myapparelsuk!

Hope you are doing well.

Please add the below CSS in your styles.css theme file at the bottom to remove the space:

@media (min-width: 768px){
.section-spacing {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.section-footer .section-footer__row-lower {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.section-footer .section-footer__row--blocks {
    padding-top: 20px !important;
}
}

Hope this will help you out.

iCart Cart Drawer Cart Upsell App


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more visit www.identixweb.com

View solution in original post

iCart_App
Shopify Partner
479 57 103

This is an accepted solution.

Hello @myapparelsuk!

To remove the padding in mobile add the below code please:

@media (max-width: 768px){
.section-spacing {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.section-footer .section-footer__row-lower {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.section-footer .section-footer__row--blocks {
    padding-top: 20px !important;
}
}

iCart Cart Drawer Cart Upsell App


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more visit www.identixweb.com

View solution in original post

Replies 9 (9)

Don
Shopify Staff
2762 199 388

Hi there @myapparelsuk!

 

Thanks for reaching out here in the Shopify Community to share your query.

 

It looks like you're selling bridal fashion, is this a new business or are you moving an existing venture online?

 

How you can get support for a given theme would depend on who has created that theme.

 

In this case, as you're using the Showcase theme this is developed and supported by Clean Canvas

 

You can contact your theme's developers using their contact form here, and you can also browse their support articles here

 

That said, we do not recommend that merchants remove whitespace from their store's themes as a general rule.

 

Whitespace allows for greater readability and accessibility for your customers, and removing it would decrease them.

 

Check out this external article for some more info on the importance of whitespace in design.

Don | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

myapparelsuk
Excursionist
21 0 8

@Don Yes you are right, White space is important but as you can see in my case gap is too much and looks ugly. Thats why I want to reduce. After slider there is too much gap. Also after every section.

My Apparels Bridal Studio | You Dream, We Deliver
Don
Shopify Staff
2762 199 388

Hi again @myapparelsuk!

 

Thanks for getting back to me here with that info.

 

I can see that you're already getting some help here from the Community, that's really great to see!

 

Should you require further assistance with editing your third-party theme beyond the help you're getting here, you can contact your theme's developers or consider hiring an Expert developer as outlined above.

 

Let us know if there's anything else we can help out with for your business on the Shopify side of things at any stage! 

Don | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

dmwwebartisan
Shopify Partner
12280 2546 3694

@myapparelsuk 

Please add the following CSS code to your assets/styles.css bottom of the file.

@media (max-width: 767px){
.section-spacing {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
}

@media (min-width: 768px){
.section-spacing {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
}

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

iCart_App
Shopify Partner
479 57 103

This is an accepted solution.

Hello @myapparelsuk!

Hope you are doing well.

Please add the below CSS in your styles.css theme file at the bottom to remove the space:

@media (min-width: 768px){
.section-spacing {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.section-footer .section-footer__row-lower {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.section-footer .section-footer__row--blocks {
    padding-top: 20px !important;
}
}

Hope this will help you out.

iCart Cart Drawer Cart Upsell App


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more visit www.identixweb.com
myapparelsuk
Excursionist
21 0 8

@iCart_App After pasting your codes on desktop white space is reduced but on mobile version showing the same. 

My Apparels Bridal Studio | You Dream, We Deliver
iCart_App
Shopify Partner
479 57 103

This is an accepted solution.

Hello @myapparelsuk!

To remove the padding in mobile add the below code please:

@media (max-width: 768px){
.section-spacing {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.section-footer .section-footer__row-lower {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.section-footer .section-footer__row--blocks {
    padding-top: 20px !important;
}
}

iCart Cart Drawer Cart Upsell App


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more visit www.identixweb.com
myapparelsuk
Excursionist
21 0 8

Thank You @iCart_App Now both mobile and Desktop space is reduced. 

My Apparels Bridal Studio | You Dream, We Deliver
inspirea
Shopify Partner
46 0 4

I need to do this as well in the Dawn theme... remove space between sections.

I tried this code but it didn't work.