Content Section Padding on Mobile

Site URL: https://ellipse-saffron-85rw.squarespace.com/experiences-culinaires-et-multisensorielles-sur-mesure-pour-tous-les-evenements

Hello,

I'm trying to reduce the empty space I have between the header and the first content section on mobile.

I'm using a Brine template in 7.0, Sorona.

I found how to adjust this padding in the Design panel (Content Section padding), but for Desktop only. I still have a big padding on mobile I could not reduce. I've tried some CSS tricks but I could not find the right way to target this space. I've checked, i don't have a Spacer block neither.

If someone knows how to target this space so I can adjust madding ? A few screenshots below.

I'm not a coder, but I know the basic in how to copy paste and customize some html codes in squarespace 🙂

Thanks a lot !

Jonathan

my desktop :

My Mobile :

The control panel I'm using for desktop :

@Jonathan_balboste

You'll need to share the sitewide password to troubleshoot

Hello @ryandejaegher. Thank you, here it is : sqbalboste.

@Jonathan_balboste 

/* Tablet size */

@media(max-width:1000px) {
main {
    padding-top: 40px !important;
}
}

/* Mobile size */

@media(max-width:640px) {
main {
    padding-top: 20px !important;
}
}

You can use this code

Thank you ! it works perfectly well.