How to reduce space between sections in Zelle

This guide explains how to reduce or adjust the spacing between homepage sections in the Zelle theme using custom CSS padding. You can copy only the sections you need and tweak the values to suit your layout.

Important notice: This product is now in maintenance mode and is no longer being actively developed or supported. Updates and bug fixes will not be provided unless they relate to security concerns.

Please install our plugin Advanced CSS Editor and in Appearance -> Customize -> Advanced CSS Editor add the following code in the "Global CSS" area:

You could copy only the sections you want and adjust the padding as needed.

/* Our Focus section*/
.focus { padding-bottom: 0 !important; padding-top: 60px !important;}

/* Portfolio section*/
.works { padding-bottom: 60px !important; padding-top: 60px !important; min-height: unset !important;}

/*About us section*/
.about-us { padding-bottom: 0 !important; padding-top: 60px !important;}

/* Our team section*/
.our-team { padding-bottom: 0 !important; padding-top: 60px !important;}

/* Testimonials section*/
.testimonial { padding-bottom: 0 !important; padding-top: 60px !important;}

/* Button right */
.purchase-now { padding-bottom: 0 !important; padding-top: 0 !important;}

/*Contact us section*/
.contact-us { padding-bottom: 0 !important; padding-top: 60px !important;}

/*Latest news section*/
.latest-news { padding-bottom: 0 !important; padding-top: 60px !important;}

Save then publish and you're done.