[Resolved] How to remove unwanted spacing under image

Home Forums Support How to remove unwanted spacing under image

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1208164
    Oisin

    Hi there,

    I used Generate Blocks to rebuild my homepage but I’m now seeing a small bit of space at the bottom of my image. I’ve looked at it in DevTools but can’t figure out where it’s coming from. Any help much appreciated.

    Oisin.

    #1208234
    David
    Staff
    Customer Support

    Hi there,

    Its the default image alignment, add this CSS which will be included in the GenerateBlocks release candidate:

    .gb-inside-container .wp-block-image img {
        vertical-align: bottom;
    }
    #1438455
    Oisin

    Hi David,

    For some reason this no longer works. Have you any idea why that might be?

    Thanks,

    Oisín.

    #1438729
    Elvin
    Staff
    Customer Support

    Hi,

    Alternative to CSS code, you can try setting the vertical alignment of the right column to Bottom: – https://docs.generateblocks.com/article/grid-overview/#editing-our-grid-block

    I’ve checked your image block and seems to be set to align right. By default, Gutenberg’s alignright class also add margin top and bottom which can also cause the gap you see.

    To remove this, you can either remove the image block’s alignment setting or set it to align center.

    or keep the settings and add this css code.

    .wp-block-image .alignright {
    margin: .5em 0 0 1em;
    }

    Let us know if this works for you.

    A wise man once said:
    "Have you cleared your cache?"

    #1438736
    Elvin
    Staff
    Customer Support

    or keep the settings and add this css code.

    .wp-block-image .alignright {
    margin: .5em 0 0 1em;
    }

    Note: this will apply all wp-block-image w/ alignright class. If that isn’t preferred, you may want to add Additional CSS class(es) on image block’s advanced settings and use for css styling.

    It may look something like this:
    additional css class

    and CSS code:

    .no-margin-bottom {
    margin-bottom: 0 !important;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1438936
    Oisin

    Hi Elvin,

    I tried:

    .no-margin-bottom {
    margin-bottom: 0 !important;
    }

    but it didn’t work for some reason? I definitely need the image right align so just need it to sit neatly on the line and everything will be fine.

    Any other reason why this is not working?

    Thanks,

    Oisín

    #1439180
    David
    Staff
    Customer Support

    For Elvins CSS do this:

    .no-margin-bottom figure {
        margin-bottom: 0 !important;
    }
    #1439859
    Oisin

    That worked perfect, thanks David. Why figure instead of img?

    #1439918
    Elvin
    Staff
    Customer Support

    Thanks David! 🙂

    That worked perfect, thanks David. Why figure instead of img?

    Because <img> is just a child of the <figure> tag, which is the one who has the unwanted margin that’s causing the gap.:)

    It’s basically structured this way in the DOM:

    div.no-margin-bottom (css class we added) > figure.alignright (causing the gap) > img (the actual image)

    Good to know that it works for you now. Cheers. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.