Remove space between sections (Showcase Theme)

Store Design
1

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.

1 Like
2

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.

2 Likes
3

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

1 Like
4

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.

1 Like
5

@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.

6

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

7

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;
}
}
8

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!

9

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

1 Like
10

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

I tried this code but it didn’t work.