Adjusting the "Wide" Group Padding

Hi there,

can you share a link to a page where i can see a wide group and the issue its causing on smaller screens ?

Hi Dave,

This page or almost any other (except some very old content): https://gardenerspath.com/plants/houseplants/anthurium-types/

There is a wide group from the top all the way down to the affiliate disclaimer. Looks fine on desktop, is slightly narrower on mobile than the rest of the body.

Thanks
Mike

There's also ones around 1. Andreanum and 5. Superbum where we have affiliate links, and then one down at the bottom in the conclusion.

Ok - so you would use this CSS:

@media(max-width: 768px) {
    .wp-block-group.alignwide .wp-block-group__inner-container {
        padding: 0;
    }
}

Adjust the padding value to suit your needs.

Thanks a bunch. This padding worked:

@media(max-width: 768px) {
    .wp-block-group.alignwide .wp-block-group__inner-container {
        padding: 0px 30px 0px 30px;
    }
}

Glad to hear that!

Did you guys add more padding to these on the last update? I have gaps where there weren't any before. I tried rolling back, but they are still there and weren't before. Weird.

I am seeing:

.site-main .wp-block-group__inner-container {
    padding: 15px 40px 15px 40px;

I tried adjusting it with zero padding and negative margin in several different configurations:

.wp-block-group.alignwide .wp-block-group__inner-container {
        padding: 0px 0px 0px 0px;

.wp-block-group.alignwide .wp-block-group__inner-container {
        margin: 0px -40px 0px -40px;

.wp-block-group__inner-container {
        margin: 0px -40px 0px -40px;

Etc.

Theres been no change since the Group inner container was introduced.
The Groups Inner Container gets the same padding as applied to the themes Container ( Customizer > Layout > Container ).

Hi Dave,

Is there any way to remove it except for adjusting the overall padding?

So do you want to remove all the padding from the Group block ? And is that on ALL devices and for the various width options ?

Hi Dave,

I need the group block to appear not to be any different than the rest of the content on any device. We only use group blocks as an easy way to place div tags in order to control ad placement. The same as most of the 15,000 large content sites spread between Adthrive and Mediavine. Most of them/us use the group blocks for this purpose. Ads don't appear between divs. Grouping is the easiest way to place them in Gutenberg...especially for semi-skilled content production assistants.

So you can try adding this CSS:

.wp-block-group .wp-block-group__inner-container {
    padding: 0 !important;
}

Thanks Dave.

I ended up with this to make everything line up on all devices (in case anyone else is looking for something similar):

.wp-block-group .wp-block-group__inner-container {
    padding: 0px 40px 0px 40px;
}
@media(max-width: 768px) {
    .wp-block-group .wp-block-group__inner-container {
        padding: 0px 30px 0px 30px;
    } !important;
}

Since there's 10 px less on the mobile view, it still requires the media query. With the !important only on that group so it overrides the padding set on the first group.

Glad to hear you found a working solution !