Archived topic
Can't override padding value in css
5 replies · Started by iamarghya on July 16, 2022
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.
Hi there,
Have you tried setting different padding for the container using the responsive controls?
https://docs.generateblocks.com/article/responsive-controls/
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.
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;
}
}Thanks
You're welcome
