Block height – fit to content

  • Hi, I can’t figure how to get the height of a block to fit the height of the content. I’m using a block group with block columns and have an image in the left column. I want the height of the image to be the same as the height of the block. But no matter what I try, I keep ending up with an extra 10px in the block height. Here’s the current setup:

    (1080 x 280) <div class=”wp-block-group__inner-container”>
    (1080 x 280) <div class=”wp-block-columns are-vertically-aligned-center”>
    (1080 x 280) <div class=”wp-block-column is-vertically-aligned-center” style=”flex-basis:25.8%”>
    (270 x 278) <figure class=”wp-block-image size-large”>
    (270 x 270) <img src="https://mysite.com/wp-content/uploads/2020/07/my-Podcast-e1595051172802.jpg" alt="My Podcast" />
    </figure>
    </div>
    (776 x 114) <div class=”wp-block-column is-vertically-aligned-center” style=”flex-basis:74.2%”>
    (776 x 32) <p>Episode 39 | 18 mins | Sep 20, 2019</p>
    (776 x 133) <figure class=”wp-block-audio aligncenter”>
    (737 x 40) <audio controls="" src="https://mysite.com/wp-content/uploads/2020/07/Ep.49-My-Podcast-Redux-93019-2.43-PM.mp3" controlslist="nodownload"></audio></figure>
    </div>
    </div>
    </div>

    Appreciate any suggestion! thanks in advance.

    • This topic was modified 4 years, 4 months ago by MHJP.
    • This topic was modified 4 years, 4 months ago by MHJP.
    • This topic was modified 4 years, 4 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

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

Viewing 1 replies (of 1 total)

  • the Hello

    To fit any element into another one, you could set the with and height to 100%, it will take the parent size fully, to avoid any drawback just set to cero the padding and margin of the child element or it will get smaller to fill the requirement.

    If the parent element has set box-sizing to border-box (a different case from yours), the parent element will subtract the margin and padding from the inner space, to keep the parent and child at the same size, just set the parent margin and padding to 0.

    If you make the changes to the CSS file these can be altered at any time inside the page, to avoid that, you could fix the code or add “!important” to adjust the 0 value to permanent.

    CSS ex.:

    .wp-block-image > img {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0!important;
}

    You could add the above code to see a draft change at the WordPress dashboard “Appearance” “Customize” “Additional CSS” you could press publish if you want to make permanent the change.

Viewing 1 replies (of 1 total)
  • The topic ‘Block height – fit to content’ is closed to new replies.