Jump to content

CSS / Image Size

Recommended Posts

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
  • sllorente changed the title to CSS / Image Size
  • Replies 6
  • Views 395
  • Created
  • Last Reply

Top Posters In This Topic

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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
  • 2 weeks later...

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.