Heading has unwanted margin below when inseting image into column

  • Resolved barnez

    (@pidengmor)


    2 years, 5 months ago

    Hi,

    First site using the block editor.

    I’m having an issue with an unwanted margin below headings when I add columns below and insert an image in one of the columns.

    If I have a heading followed by a paragraph block, the margin between the two blocks is as required (see here). However, when I add a column block below the heading and insert an image into one of the columns, I get unwanted margin between the heading and the paragraph block (see here).

    I can see that the column block adds a 3rem top and bottom margin. I’ve added a custom class (services-column-block-1) and tried adding .services-column-block-1 { margin-top: 2rem; } but that has not reduced the margin.

    This only seems to be an issue on tablet and wider screens. The mobile view is fine.

    Any suggestions?

    • This topic was modified 2 years, 5 months ago by barnez.

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

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

  • I can see that the column block adds a 3rem top and bottom margin. I’ve added a custom class (services-column-block-1) and tried adding .services-column-block-1 { margin-top: 2rem; } but that has not reduced the margin.

    It’s not the margin: it’s the flexbox’s center alignment. Imagine this: you have two table cells with images of different heights, but both cells are vertically aligned to the middle of the cell. The end result: you’ll have empty spaces above and below the cell with the shorter image.

    Try: services-column-block-1 {align-items: flex-start;}

    Thread Starter barnez

    (@pidengmor)

    Hi. Many thanks for taking a look. I tried applying that css rule, but nothing has changed. I’ve also tried reducing the copyediting image size by 50% so it is smaller than the paragraph text, but that empty space above and below is still there.

    Edit. Fixed. Thank you!!

    • This reply was modified 2 years, 5 months ago by barnez.

    Sorry, the selector was not specific enough. You can add the other classes in the column block (or add the dreaded !important) to make it more specific.

    eg .wp-container-3.wp-block-columns.services-column-block-1

    UPDATE:

    I can see you used div.services-column-block-1, which seems to have worked. You may add margin-top: 0px; to reduce the space further.

    • This reply was modified 2 years, 5 months ago by George Appiah.
    Thread Starter barnez

    (@pidengmor)

    Thanks for that. Yes, I added the div prefix which did the trick. I am trying to wean myself off !important, which used to see a lot of action in my child themes ??

    Is there any way of vertically aligning the image at the top of the container, level with the first line of text (see here)? I notice one of the selectors is is-vertically-aligned-bottom, but I can’t see any settings in the block editor to vertically align images, only horizontally.

    Thread Starter barnez

    (@pidengmor)

    Resolved (again). Rather than using columns, I just nested the image in the paragraph block and it aligns much better now. Thanks for your help George.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Heading has unwanted margin below when inseting image into column’ is closed to new replies.