[Resolved] Strange margin appearing on media/text block

[Paul]

Hi there
I’m building a simple site, and have noticed a weird negative margin appearing on the media/text block
Link to an example is the the URL box on this form.

The left margin is set to -40 (minus 40), and bottom to 0 … and i cannot figure out why?
It is set thus in the page’s in-line CSS – is this all embedded in the main theme? or could i have changed a setting? I have looked everywhere I can think of!

I have used this exact same theme, and indeed “site library” on a couple of other websites, and not had same issue.

I can fudge some custom CSS to fix, but i’d prefer not to, and its driving me nuts not knowing where this is coming from… and not sure where else to look 😉
Thanks in advance for any pointers/tips!

[David]

Hi there,

you have the Wide Width option selected for that block.
Select the Block and in the toolbar select Wide Width again to deselect it.

[Paul]

Hi David
Wow I’m embarrassed that it was as simple as that! And thanks for the quick reply.

But… i don’t feel SO bad, because that seems to be the default setting now for some reason. Does that sound normal?

[David]

Wow – it does look like Gutenberg set it to be default. Thats terrible. Never noticed it before as i use GenerateBlocks for layouts like that – but it does explain why so many people have had a similar problem. Thanks for pointing that out.

[Paul]

Thanks for confirming same issue your end… and if YOU are seeing it, then yes must be a Gutenberg thing.

Odd thing… I’ve never noticed it being used by default on my other sites. I wonder if it’s an update or something! In fact i just tested it on my main site… Generate Press, same setup… and seems not to do it.

Anyway, I will see if i can get to the bottom of it – but thanks for you comments, it is clearly not a GP issue.

Thanks 🙂

[Paul]

Hi David

If it helps, i think i have found it to be a feature, possibly intended of the “Mellow” sub-theme in the SITE LIBRARY. My investigations revealed the below. I can get around it with CSS easily, but just flagging it up if it helps anyone else!

EXAMPLE OF CLASS AFFECTED
wp-block-media-text alignwide

SETTING WHICH CAUSES IMPACT ON IN-LINE CSS (70px is just an example):

Customizing – Layout – Container
Content Padding = 70px left//right

RESULTANT CSS ON PAGE (noting the -70, to reflect the 70px padding setting. I changed the padding to other values, and noted the CSS changed in line):

.entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull {
margin-left: -70px;
width: calc(100% + 140px);
max-width: calc(100% + 140px);
}

CONCLUSION
I think this is probably an intended “Feature” of the “Mellow” sub-theme in the SITE LIBRARY, ie so that any “Wide” images should fill the container, regardless of padding selected. Does that make sense?

Thanks again for your initial quick response. It certainly helped me realise what was going on!

[David]

Hi Paul,

the alignwide and alignfull classes are added by those Wide and Full Width gutenberg options. GP has to incorporate that really hackish CSS to deliver those effects.

So its not specific to any Site Library site. It just seems a little random on what causes the Wide option to be enabled by default. Looks like a ‘bug’ in Gutenberg.

Personally i avoid using that and now only use GenerateBlocks for any type of special layout.

[Paul]

Morning David
gotcha, that makes sense!
PS I’ve had a look at GenerateBlocks – i was not aware of those until you mentioned them! Looks a useful addition, thanks 🙂
Thanks again for this great support – I’ll mark the topic resolved.
Have a great weekend

[David]

You’re welcome – have a good weekend too.

[Author]

Posts