[Resolved] Why Margin 0px in mobile view? Is this intended?

[Dennis]

Hello,

I use GP Premium with the default Gutenberg and I just noticed on mobile that the Paragraph Text has 0 margin and padding. Is this intended? I think it would be better readable if you add a small margin for mobile. For example if the word finishing with the letter “r” on the right side you would think that this might be an “n”.

See this Screenshot. But you would need to check this on black background to notice my point. And I would argue most mobile devices have a black frame.

If I inspect this element in the mobile view, I see this code:

blockquote, body, dd, dl, dt, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, html, iframe, legend, li, ol, p, pre, textarea, ul {
    margin: 0;
    padding: 0;
    border: 0;
}

What do you think? Thanks in advance.

[Dennis]

Sorry. This seems to be an issue with LearnDash which adds this strange css to the website:

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

I will discuss this with the LearnDash support.

[David]

Let us know how you get on with LearnDash support.

[Dennis]

Ok I saw it is from an inline css:
<style id=’generate-style-inline-css’ type=’text/css’>

I read in another thread that this css is created from customizer settings? But I did not choose anything special or fancy there.

It is also adding this strange css:

.entry-content > [class*="wp-block-"]:not(:last-child) {
    margin-bottom: 1.5em;
}

which will destroy the margin for the wp-block-separator for example. It usually has equal margin-bottom and margin-top.

Can you say if this css is somehow added by default for a reason? Or what I may have configured?

Thank you!

[Elvin]

Can you say if this css is somehow added by default for a reason? Or what I may have configured?

It is added by default so all wp-blocks will have 1.5em margin on its bottom part except for the last one (last-child). It’s a styling preference so the blocks don’t look vertically jammed too much to give the eyes of a the reader a bit of “breathing space”.

but you can always override it by adding your own custom CSS on Appearance > Customize > Additional CSS.

You can remove it with this if you want:
.entry-content > [class*="wp-block-"]:not(:last-child) { margin-bottom: 0; }

[Dennis]

Ok, I guess for most cases this makes sense, so I added a class to my separator and fixed it this way.

Thanks for the info!

[Elvin]

No problem. Glad to be of any help. 😀

[Author]

Posts