Section Block: Custom Padding on Tablet, Mobile
-
I’m trying to adjust the padding on different screen sizes and I’m running into a limitation with the Section block. On desktop sizes, you can set a custom padding value, but this isn’t an option on Tablet and Mobile breakpoints; you’re limited to the small, medium, etc.
Now, there is a way I found to set this style with custom code. You leave the styling in the visual builder set to default, which applies the padding as an inline style. This is important because if you set it to small/medium/etc., the padding is applied using a new class and !important tags, which are really hard to override. Then you use this method of overriding inline CSS to set the padding. I used the following code (the first style is a custom one applied to the section block):@media only screen and (max-width: 414px) { .mm-section-padding div.wp-block-getwid-section__wrapper[style] { padding-top: 80px !important; padding-bottom: 80px !important; } }
Obviously, for people who aren’t as familiar with coding, this is a challenge, so setting a custom value for tablet and mobile sizes in the visual builder would be a really nice feature to have. And on that note, being able to easily apply that styling to all section blocks on a page or across the site would be handy as well (perhaps being able to establish new default settings, similar to what builders like Divi allow).
- The topic ‘Section Block: Custom Padding on Tablet, Mobile’ is closed to new replies.