[Resolved] Can’t override padding value in css

[iamarghya]

on this page, in the page hero element below 480px, I want to have a 20px padding left and right but I can’t override the value.

.gb-container-d2ed399d > .gb-inside-container {
    padding: 30px 40px 50px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    position: relative;
}

I want that 40px to be 20px on mobile devices.

[Leo]

Hi there,

Have you tried setting different padding for the container using the responsive controls?
https://docs.generateblocks.com/article/responsive-controls/

[iamarghya]

I actually did it fully by CSS, tried using control but couldn’t figure it out so wrote the CSS for that if U can check once that will be very helpful.

[David]

Hi there,

do this:

1. Edit the Hero, select the container block whose padding you want to adjust.
1.1 In the Advanced > Additional CSS Class(es) add: mobile-hero-padding
1,2 Publish that change

2. Add this CSS:

@media (max-width: 480px) {
    .gb-container.mobile-hero-padding > .gb-inside-container {
        padding-right: 20px;
        padding-left: 20px;
    }
}

[iamarghya]

Thanks

[David]

You’re welcome

[Author]

Posts