CSS / Image Size

Site URL: https://restoredformoms.com/

Hello!  I've included two screenprints below.  Can someone please advise how to change the image for the event list to be square?  When you are on the site and you select:

• "events" + "upcoming events"
• Those images are 1:1 (square)
• Select any event
• Select "back to all events"
• Then shows a diff view of the events (not 1:1)

This different view is where you will notice the images are cropped on the top and bottom for the "Restored Play Date" as the designed images are square.  It doesn't look like I can change to square and do not know what else to do?

Thanks so much!

It looks like you changed event page layout. Do you still need help?

https://restoredformoms.com/upcoming-events-for-working-moms-raleigh-nc

Hi - thank you for responding!  Yes, there is still an issue with the events page.  There are actually 2 different views of the event page.

This one looks good!

• https://restoredformoms.com/upcoming-events-for-working-moms-raleigh-nc 

This particular link is still cutting off images.  This is the one I would like the graphics to be square.  I cannot figure out how to change, so makes me assume I need CSS???

• https://restoredformoms.com/events-for-working-moms-raleigh-nc

Thanks again!

@tuanphan

19 hours ago, sllorente said:

Hi - thank you for responding!  Yes, there is still an issue with the events page.  There are actually 2 different views of the event page.

This one looks good!

• https://restoredformoms.com/upcoming-events-for-working-moms-raleigh-nc 

This particular link is still cutting off images.  This is the one I would like the graphics to be square.  I cannot figure out how to change, so makes me assume I need CSS???

• https://restoredformoms.com/events-for-working-moms-raleigh-nc

Thanks again!

 

@tuanphan

Try adding to Design > Custom CSS

/* resize event images */
@media screen and (min-width:901px) {
body#collection-5d5c6f6ed085f00001c8706a {
.eventlist-column-thumbnail img {
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
}
.event-thumbnail-size-32-standard .eventlist-column-thumbnail {
    padding-bottom: 30% !important;
}}
}

Thank you for your response.  I have provided two screenprints below.  The first screenprint is the before Custom CSS and the second screenprint is the after of the custom CSS.  It looks like the CSS moved the image down quite a bit, but then cut more of the bottom of the graphic off.  Any advise is greatly appreciated!

Thanks so much!

@tuanphan

@tuanphan Hi there!  Just wanted to see if you had any other solutions.  Thanks again!

Try this new code

@media screen and (min-width:901px) {
.eventlist-column-thumbnail img {
    top: 0 !important;
    height: auto !important;
    width: 100% !important;
}
.event-thumbnail-size-32-standard .eventlist-column-thumbnail {
    padding-bottom: 35% !important;
    background-color: white;
}
}