How can I reduce empty spaces in the Focal theme?

[GonzaLega]

Hi,

Could you help me please to reduce the empty spaces in Focal theme? Like in the picture

Thank you

Gonzalo

[GonzaLega]

Buongiorno

Qualcuno mi potrebbe aiutare su come diminuire gli spazi vuoti in rosso della immagine. Il tema è Focal

Grazie mille

Gonzalo

[WoodyDev]

Hi and welcome!

Please post a URL to your store and I will gladly take a look for you

[GonzaLega]

https://komoemotional.com/

Thank you!

[WoodyDev]

Perfect!

Add these to the bottom of your theme.css file:

.heading--small+p, .heading--small+.h1, .heading--small+h1, .heading--small+.h2, .heading--small+h2, .heading--small+.h3, .heading--small+h3, .heading--small+.h4, .heading--small+h4, .heading--small+.h5, .heading--small+h5, .heading--small+.h6, .heading--small+h6 {
    margin: 0px !important;
}

.text-container .heading--small, .rte .heading--small {
    margin: 0px !important;
}

.tabs-nav:not(:first-child) {
    margin-top: 0px !important;
}

.rte>:last-child, .text-container>:last-child {
    margin: 0px !important;
}

Edit the value for margin to get the desired spacing for each

[GonzaLega]

Yes thank you, now it’s better but I would still like to shrink the margins of the whole block, and the one between the sentence and the images. Also for the block with title “GREEN PACKS”

Thank you so much!

[WoodyDev]

Sure!

Try these:

.section__header {
    margin-bottom: 0 !important;
}

.product-item__cta {
    margin-top: 0px !important;
}

.section__footer {
    margin-top: 0px !important;
}
.vertical-breather {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

Again, edit the 0 to best suit you