Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Can’t Remove Extra Image Padding

  • Hey Guys,

    I created a block element (with one container and one image) and hooked it below the header (generate_after_header) to display a thin multi-colored line. The line should be flush with the hero banner, however, even with everything set to 0px padding and 0px margin, I am still seeing excess padding – no idea why.

    Here’s a screenshot – https://imgur.com/a/AY9TBjg

    I’d really appreciate some help to solve this mystery.

    Thanks guys
    Mozez

  • Hi there,

    Can you try this?

    1. Add a CSS class to the image block, eg. true-height.

    2. Add this CSS:

    figure.gb-block-image:has(.true-height) {
        display: flex;
    }

    Let me know if this helps!

  • Hi again Ying,

    I’m following up on this same topic from last week.

    The CSS you gave worked great! The multi-colored image looked perfect when I hooked it into the header and footer. However, I also need to display the image on other sections of the page but when I add it as a regular image it shows super tiny.

    I wonder if there’s a way to hook it to:

    A) Hook it to certain parts of a page
    B) Fix the image

    Please see the link to the screenshot and site below.

    Thanks so much

  • Hi there,

    the issue comes from the <figure> element that wraps the <img>
    Its a content element so it inherits typography styles such as font-size and line-height from its parent.

    As theres no way ( currently ) to remove the figure you can try this CSS:

    
    figure.gb-block-image {
        line-height: 1;
    }
    

    Which will reduce the line-height so its identical to the font size , which will remove the gap below the image.

    IF need be you can do this:

    
    figure.gb-block-image {
        line-height: 1;
        font-size: 0;
    }
    

    Which will make the figure the exact height of the image.
    But if any images have a caption you must make sure the caption has its own font-size.

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