Changing image aspect ratio for events calendar PLUS event calendar display style

Hello, how do I change the aspect ratio for images on my events/calendar page? I would like images for events to be displayed in a 1:1 aspect ratio rather than the current landscape format.

thegalaslc.com/calendar

Secondly, on desktop, it shows images on the calendar for each Day's event. However, on mobile, I don't see these images. How do I make sure the calendar shows up like this on mobile? The below image is what I want.

This image is what mobile users currently see and is what I want to change.

Thank you very much for your help!

#1. You try adding this to Website Tools > Custom CSS

.tweak-events-stacked-thumbnail-size-32-standard .eventlist-column-thumbnail {
    padding-bottom: unset !important;
    height: auto !important;
}
.eventlist-column-thumbnail img {
    object-fit: contain !important;
}

On 11/19/2024 at 1:38 AM, tuanphan said:

#1. You try adding this to Website Tools > Custom CSS

.tweak-events-stacked-thumbnail-size-32-standard .eventlist-column-thumbnail {
    padding-bottom: unset !important;
    height: auto !important;
}
.eventlist-column-thumbnail img {
    object-fit: contain !important;
}

 

Hey Tuanphan, appreciate the help!

Do you have any questions on the calendar front? If using the event the pics on calendar days on mobile isn't feasible, can you help me change the color of days that have events on them? Currently it's very low contrast and hard to see. If I can add a white background to days with events (white square, black text) that would be perfect.

On 11/23/2024 at 3:57 AM, issakamacd said:

Hey Tuanphan, appreciate the help!

Do you have any questions on the calendar front? If using the event the pics on calendar days on mobile isn't feasible, can you help me change the color of days that have events on them? Currently it's very low contrast and hard to see. If I can add a white background to days with events (white square, black text) that would be perfect.

You can use CSS code like this

@media screen and (max-width:767px) {
    td.has-event * {
    color: #000 !important;
}
    td.has-event {
        background-color: #fff !important;
    }
}