indented paragraph with small text

  • Resolved persist9

    (@persist9)


    3 years, 11 months ago

    I am using the block editor and want:
    . to use only WordPress blocks
    . two paragraphs linked by a background color.
    . the top paragraph in normal text & left justified
    . the bottom paragraph in small text & left justified. (It is small text because it is a hyperlink to an article that supports the information in the top line.)

    I tried:
    . a group block containing two paragraph blocks
    . the group block has a background color behind the entire group block, and so behind both paragraph block with no break, showing that the paragraphs are linked.
    . The top line in a paragraph block with bold normal size, left justified text.
    . the second line in a paragraph block with small font, left justified text.

    This works, but it does not look pretty. The paragraph block text is at the extreme left of the background color. I want to indent the text.

    I can indent the top text by using a “classical editor block”, inserting a paragraph, and pressing on the indent button of the classical block.

    However, This did not work for my second line. I could not find an instruction, in the “block editor” “classical block”, to make the indented text small.

    Any ideas about how I could do this?

    I have been using a “profile block” from the Genesis block collection. It was called the Atomic blocks collection) I used their “profile block” without using any image in the profile block. Will this possible search for a non-existent image slow my site down? See two examples of this use of the a “profile block” below the heading “promote a vision” on this page:
    https://www.feedbackreigns.net/solution-focussed-climate-slogans/

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • The paragraph block text is at the extreme left of the background color. I want to indent the text.

    You can just use CSS PADDING to achieve the same effect.

    One way to do this is to add a custom class name (eg myindent) to the GROUP BLOCK’s “Additional CSS class(es)” box… and then add the necessary CSS code below in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS

    .myindent {
padding-left: 50px;
}

    NB: If the above doesn’t work, then some other CSS on your site is overriding it. I’ll need to see the page with the problem before I can provide code that is guaranteed to work.

    Thread Starter persist9

    (@persist9)

    Great. I have included an example on a public page, see:
    https://www.feedbackreigns.net/about-2/viewing-hints/
    The example is at the bottom of the page under the heading “temporary test”

    In each block, I have included a spacer, a paragraph in normal font, a paragraph in small font, and another spacer.

    I have had to include another spacer between Example 1 and example 2 to give white space between example 1 and 2.

    This example does not use the “classic block” so both paragraphs have text at the extreme left of the background colour. Hopefully, the same CSS will indent both paragraphs.

    If I use a group block elsewhere, for another purpose, will text there be indented too? At the moment I am not using a group block for another purpose.

    Thanks for your help.

    Hello,

    Thanks for the update.

    Kindly place this CSS code in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS, and hit PUBLISH to apply the code.

    .wp-block-group.has-background {
padding-left: 30px;
}

    Test and adjust the value of 30 to your desired indentation.

    If I use a group block elsewhere, for another purpose, will text there be indented too? At the moment I am not using a group block for another purpose.

    Yes, the above code will work for any group block that also has a background color applied, on any page or post.

    If you need to control which group block the code works on, then you’ll have to use the custom CSS class option I mentioned earlier. In that case, the code will ONLY work on individual group block(s) that you’ve specifically added the custom CSS class to.

    Thread Starter persist9

    (@persist9)

    Brilliant Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘indented paragraph with small text’ is closed to new replies.