Making “More from Category” Images Same Size

Hey there,

For those images, Mission News uses the “Medium” image size, which can be customized in this settings menu: https://screenshot.competethemes.com/YEuQZ5lq

It should crop the images so that they are the same size, but you may want to try making the width & height values equal to 300px as this is sure to work well with Mission News.

The media settings are as shown in your screenshot. Yet Mission News does not always use the “medium” image size for the “more category” images. I don’t understand your point about “making the width & height values equal to 300px” as they are already set to those values. I thought it was a caching issue, but that’s not the case either. Any thoughts?

Okay I see what’s happening now. The HTML is different around the Featured Images. I can’t tell which plugin is causing this, but the following CSS should correct the issue:

.more-from-category .featured-image img {
	position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Please copy and paste that code into the Additional CSS section in the Live Customizer (Appearance > Customize). Once you add that, the images will be resized and cropped so that they fill out the available height and are all the same size.

Thanks. The only problem there is that this new code distorts the image and makes it look really grubby. Not nice.

Okay, I’ve found the culprit. The ‘Imagify’ plugin. Not sure what the solution is but investigating.

Aha that makes sense. It must be the webP option that wraps the images in a <picture> element. Try disabling that option and see how it looks.

Also, if this does fix the error, you can remove the CSS code I shared here.

Yeah, I worked it out and had made those changes. Thanks, though.