CSS / Image Size

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;
}
}