Need help to reduce gap between sections in home page

Solved

Need help to reduce gap between sections in home page

thisiskishor
Excursionist
22 1 7

Hi there, 

As mentioned in the title, I need help removing a few gaps between the sections on the home page of https://www.fitnessnbalance.com/

 

The padding on all the sections is set to zero, however, it still has a gap that I can't seem to reduce.

 

I would really appreciate it if someone could help me with a code that clearly shows the number (eg. 11/12px) that can determine the gap so that I myself can change it according to the requirement after checking it on the website. or it would also help if you could guide me on how to change the gap in all the sections (following a process) so I can try it myself. However, I only have a little coding knowledge but can understand and change minor codes when required. 

 

Thank you!

Image for reference:

WhatsApp Image 2024-07-05 at 12.23.35.jpeg

WhatsApp Image 2024-07-05 at 12.23.35k.jpeg

WhatsApp Image 2024-07-05 at 12.23.357.jpeg

   

Accepted Solution (1)

Moeed
Shopify Partner
4351 1121 1375

This is an accepted solution.

Hey @thisiskishor 

 

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>
@media screen and (max-width: 767px) {
.jdgm-carousel-wrapper {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}
section#shopify-section-template--17882014908635__1718730407d29b148a {
    padding-bottom: 0 !important;
}
section#shopify-section-template--17882014908635__multicolumn_wxkr7c {
    padding-top: 0 !important;
}
section#shopify-section-template--17882014908635__image_banner_jf7TAD {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}
section#shopify-section-template--17882014908635__17187267275423a89b {
    display: none !important;
}
div#shopify-section-template--17882014908635__image_with_text_jBTGLL {
    padding-bottom: 0 !important;
}
}
</style>

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 2 (2)

Moeed
Shopify Partner
4351 1121 1375

This is an accepted solution.

Hey @thisiskishor 

 

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>
@media screen and (max-width: 767px) {
.jdgm-carousel-wrapper {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}
section#shopify-section-template--17882014908635__1718730407d29b148a {
    padding-bottom: 0 !important;
}
section#shopify-section-template--17882014908635__multicolumn_wxkr7c {
    padding-top: 0 !important;
}
section#shopify-section-template--17882014908635__image_banner_jf7TAD {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}
section#shopify-section-template--17882014908635__17187267275423a89b {
    display: none !important;
}
div#shopify-section-template--17882014908635__image_with_text_jBTGLL {
    padding-bottom: 0 !important;
}
}
</style>

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
thisiskishor
Excursionist
22 1 7

Hi @Moeed , 

 

Thank you very much for the help! This is exactly what I needed. 

However, can you please let me know what is the difference between using section #shopify-section-template and div #shopify-section-template while denoting the class that needs to be changed? If I understand this, I maybe can change the sections as required myself. 

 

Once again, Thank you for the help!

 

 

 

section#shopify-section-template--17882014908635__17187267275423a89b {
    display: none !important;
}
div#shopify-section-template--17882014908635__image_with_text_jBTGLL {
    padding-bottom: 0 !important;