Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS / Image Size


sllorente

Question

Posted (edited)

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!

Screen Shot 2022-06-08 at 8.35.41 AM.png

Edited by sllorente
added wording
Link to comment
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

6 answers to this question

Recommended Posts

  • 0

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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!

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???

Thanks again!

 

@tuanphan

Link to comment
  • 0
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!

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???

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
Posted (edited)

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

image.png

image.png

Edited by sllorente
reword
Link to comment
  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...