Solved

How can I reduce white space between sections in Studio theme?

AtlasPrints
Visitor
3 0 0

Good morning,

 

I would like to eliminate, or at least reduce, a white space between a Rich Text section and a review slider (I installed an external app for that). From the basic costume settings I can't get them any closer than this. The theme used is 'Studio'

 

I've already looked at the code but there doesn't seem to be anything between the two sections.

I'm asking someone more experienced for help.

 

spazio-bianco-2.jpg

 

Thank you.

Matteo

 

Web: atlasprints.it

Pass: beabep

Accepted Solution (1)

MiracleWebsoft
Shopify Partner
35 4 7

This is an accepted solution.

I have reviewed there some additional spaces due to CSS code. The screenshot you shared will be fixed by below code 

#kbz-slider-wrapper.svelte-1nq9s8e {
    margin-top: 0;
}

- Your Coffee Tip can create magic in coding


- Seeking a Shopify Certified Developer? Contact us Shopify Verified partners



If I managed to help you then, don't forget to Like it and Mark it as Solution! 

View solution in original post

Replies 4 (4)

PurplePartner
Shopify Partner
178 18 30

Hi @AtlasPrints,

 

Thanks for being part of the community! What you are saying makes absolute sense. 

 

You need to reduce the padding in order to do that. This can be completed at an individual level - meaning that you'll reduce the padding just for those 2 sections - or at a global level - meaning that you can reduce the padding overall, across the website, if you face the same issue somewhere else.

 

I would like to help by implementing a small custom code that your store can benefit from to reduce the padding and increase the user experience. I'll have to access your store through the Shopify Partners Portal. If that's okay, just send me a private message with your Shopify URL and Collaborator Code.

Did you find my response useful? Mark it as "Accepted solution" so others can see it, or just like it.

MiracleWebsoft
Shopify Partner
35 4 7

This is an accepted solution.

I have reviewed there some additional spaces due to CSS code. The screenshot you shared will be fixed by below code 

#kbz-slider-wrapper.svelte-1nq9s8e {
    margin-top: 0;
}

- Your Coffee Tip can create magic in coding


- Seeking a Shopify Certified Developer? Contact us Shopify Verified partners



If I managed to help you then, don't forget to Like it and Mark it as Solution! 

AtlasPrints
Visitor
3 0 0

It works perfectly.

Thank a lot!

Matteo

Moeed
Shopify Partner
3804 962 1193

Hey @AtlasPrints 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
div#kbz-slider-wrapper {
    margin-top: 5px !important;
}
</style>

RESULT:

Moeed_0-1712131984412.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️