How to make feature images the same size for Peak?

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

I'm sorry, I totally forgot to add the website. The website is: http://www.YouLoveThings.com

Hi there,

the following CSS will force all images to the same height:

.wp-block-latest-posts__featured-image img {
    height: 200px;
    width: 100%;
    object-fit: cover;
}

But the issue with doing this is that the browser wont be able to select the correct size image - so it may load a larger on mobile then you would like. Best solution is to try and upload images of the same aspect ratio.

Just an extra here - this CSS will make the columns equal height so all the read more buttons are aligned:

.wp-block-latest-posts.is-grid li,
.wp-block-latest-posts__post-excerpt {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wp-block-latest-posts .read-more-container {
    padding-top: 20px;
    margin-top: auto;
}

That's great! It looks like the images are uploaded almost the same and they are a lot bigger but as a featured image it resizes it smaller but different, but this code fixes it. I didn't notice a difference on mobile. Also, thank you for the extra, that makes it look so much nicer!

I was looking into the Theme Editor to edit the css but it told me I can add it in the additional CSS section, I assume that was the right way to add the CSS code?

Also, if you go back to the site I added the code but it looks like the images are centered above the title of the article. Is it possible to line up the image to the left that lines up with the title? I hope that makes sense. I tried doing it in the block editor but that doesn't align it.

Made an edit to the first CSS rule here - which is the inclusion of the width: 100%; property.

Yep - Additional CSS is the place to add it :)