While ideally the featured images for all of your events in The Events Calendar would be the same, standardized size, often there are differences in the width and height. If you’re using something like our The Events Calendar Shortcode & Block plugin to promote the events on your site in a tabular view, you may want the images to be the same height so they all line up.

Fortunately there’s a way to do that using a bit of CSS styling! For example, to standardize all of the images to be 75 pixels in height using the Columns or Grid design, you can use something like this:

.ecs-events.ecs-grid .ecs-event .ecs-thumbnail img {
    width: 100%;
    height: 75px;
    object-fit: cover;
    object-position: 50% 50%;

If you’re not sure how to add custom styling to your site, take a look at our post on adding custom CSS styling to your site.

Published by Brian Hogg