Paragraph padding isn’t inherited in some div

  • Resolved ooker

    (@ooker)


    3 years, 9 months ago

    Take a look at this post. The gaps between paragraphs in the colored boxes and the poem at the footer are diminished. They are perfectly fine in the editor though. I suppose that it’s because they are not inherited. Can you help?

    • This topic was modified 3 years, 9 months ago by ooker.
Viewing 10 replies - 1 through 10 (of 10 total)

  • We noticed this too. Our fix was to inject the class wp-block-template-part into the containing div.

    So in your case it would be ugb-container__content-wrapper ugb-a96eab4-content-wrapper wp-block-template-part.

    I would be interested to know what the theme developers recommend, though.

    Oliver

    Thread Starter ooker

    (@ooker)

    that would be too much work to do. Is there a better way to do that?

    It also seems that you are the only active member in this support forum? I wonder if the devs care to take this or not.

    It may seem that way but I have a vested interest in the theme to keep the “Options for Twenty Twenty-One” plugin as up-to-date as possible ??

    I’m pretty sure the theme developers keep an eye on this forum and with any luck we’ll find out soon enough what the official recommended method is!

    Oliver

    Moderator James Huff

    (@macmanx)

    Would you please report this via https://core.trac.www.ads-software.com/newticket ?

    Please use the “Bundled Theme” component and start the Summary field with Twenty Twenty-One:

    Thread Starter ooker

    (@ooker)

    I’ve done it here https://core.trac.www.ads-software.com/ticket/52589#ticket

    Moderator James Huff

    (@macmanx)

    Thanks! The developers will reply there as soon as they can.

    At least for this specific site, I recommend using the following styles:

    
/* padding instead of margin */
.indent {
    padding-left: 30px;
    font-style: italic;
}

p {
  margin-bottom: calc(0.666 * var(--global--spacing-vertical));
}

@media only screen and (min-width: 482px) {
  p {
    margin-bottom: var(--global--spacing-vertical);
  }
}

    I forgot to add a fallback margin for older browsers:

    
/* padding instead of margin */
.indent {
    padding-left: 30px;
    font-style: italic;
}

p {
  margin-bottom: 20px;
  margin-bottom: calc(0.666 * var(--global--spacing-vertical));
}

@media only screen and (min-width: 482px) {
  p {
    margin-bottom: 30px;
    margin-bottom: var(--global--spacing-vertical);
  }
}
    Thread Starter ooker

    (@ooker)

    thanks. Can you explain why you prefer padding instead of margin?

    A padding on the left worked for me with the .indent class on its own. Editing the side margin(s) would require overriding at least one of the following two highly specific selectors:

    
.entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
[class*="inner-container"] > :not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
    margin-left: auto;
    margin-right: auto;
}

    If fighting against that were necessary, one of the other 8,000+ free themes probably would serve you better. But switching to padding is rather simple in this case.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Paragraph padding isn’t inherited in some div’ is closed to new replies.