Event Thumbnail Size

Site URL: https://www.themilkbank.org/new-events

I'd like to find a way to make the thumbnail on my events page smaller.  Currently they take up about a third of the row, ideally I'd like them half the size they are right now, if not a little smaller.  https://www.themilkbank.org/new-events

1 hour ago, McMurphy said:

Site URL: https://www.themilkbank.org/new-events

I'd like to find a way to make the thumbnail on my events page smaller.  Currently they take up about a third of the row, ideally I'd like them half the size they are right now, if not a little smaller.  https://www.themilkbank.org/new-events

Is it the result you want to achieve?

Yes, that's exactly it!

7 minutes ago, McMurphy said:

Yes, that's exactly it!

Try in Home > Design > Custom Css

#collection-6172c36c451d363d0fdfeae2 .eventlist-column-thumbnail.content-fill {
  width: 17.5%;
  padding-bottom: 17%;
}

#collection-6172c36c451d363d0fdfeae2 .eventlist-column-date .eventlist-datetag{
  --square: 65px;
  /*change if you want bigger or smaller date squares*/
  left: 140px;
  width: var(--square);
  min-height: var(--square)
}

Let me know if it works properly on your site

Support me by pressing 👍 if this useful for you

Yes, that's perfect!!  Thank you so much!

This code adjusted the size of my event thumbnails perfectly, but they are now a mess on the mobile version. How can I fix this?

On 12/9/2023 at 4:02 AM, ALCT said:

This code adjusted the size of my event thumbnails perfectly, but they are now a mess on the mobile version. How can I fix this?

What is your event page? We can check problem easier

I removed the code because I didn't want the thumbnails to be cropped on the mobile version. Is there a way to ensure that it works across all devices?

On 1/12/2024 at 12:42 AM, ALCT said:

I removed the code because I didn't want the thumbnails to be cropped on the mobile version. Is there a way to ensure that it works across all devices?

Can you share link to event? We can check again easier