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

How to resize event thumbnails?


Recommended Posts

  • 2 months later...
  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Add to Home > Design > Custom CSS img.eventlist-thumbnail.loaded { width: 100% !important; height: auto !important; left: 0 !important; }  

Posted Images

I would like to learn about this as well. I'm trying to use facebook event cover photos as thumbnails but they don't have the same aspect ratios causing the thumbnails to be cropped off which is really annoying...

Link to post
On 11/20/2019 at 11:35 PM, cincolaters said:

Hi everyone 

Hopefully this is a simple thing to fix. I'm trying to make the thumbnails on my events page smaller. Right now, they are at 1:1 (which works for the image dimensions), but they're way too big and also causing the images to blow out. 

Anyone know how to resize these, like we can in a gallery?

Thanks

SITE: https://www.saraleonlaw.com/news-events

Have you solved yet?

6 hours ago, siweisong said:

I would like to learn about this as well. I'm trying to use facebook event cover photos as thumbnails but they don't have the same aspect ratios causing the thumbnails to be cropped off which is really annoying...

If you share link, we can take a look

Link to post
10 hours ago, siweisong said:

https://www.fortsferryfarm.com/events

password is farmlife

 

Add to Home > Design > Custom CSS

img.eventlist-thumbnail.loaded {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}

 

Link to post
  • 1 month later...
On 1/31/2020 at 11:03 PM, tuanphan said:

Add to Home > Design > Custom CSS


img.eventlist-thumbnail.loaded {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}

 

Actually I just realized something, that there's a grey space at the bottom of the thumbnails because the images are basically shrunk to fit the width of the box. So I would love to make that box wider to fit the height of the thumbnail as well as the width, so basically make the whole left column wider. It's fine if the width of the except gets narrower. 

Screen Shot 2020-03-11 at 4.28.10 PM.png

Link to post
  • 7 months later...
  • 6 months later...
On 1/31/2020 at 11:03 PM, tuanphan said:

Add to Home > Design > Custom CSS


img.eventlist-thumbnail.loaded {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}

 

Hey Tuan, this code isn't resizing the images on my events page. Any idea why?http://narrativehealing.com/events-2

Link to post
On 4/30/2021 at 7:32 PM, barrysutton said:

Hey Tuan, this code isn't resizing the images on my events page. Any idea why?http://narrativehealing.com/events-2

Add to Design > Custom CSS

/* resize events */
article.eventlist-event img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}

 

Link to post
On 5/3/2021 at 4:08 AM, tuanphan said:

Add to Design > Custom CSS






/* resize events */
article.eventlist-event img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}

 

Hi Tuan,

This reduces the image size, but the grey bounding box still remains. I have made the change to the page if you can check it out. Thanks so much. -Barry

Link to post
6 hours ago, barrysutton said:

Hi Tuan,

This reduces the image size, but the grey bounding box still remains. I have made the change to the page if you can check it out. Thanks so much. -Barry

Add to Events 2 Page Header

<style>
  .tweak-events-stacked-thumbnail-size-11-square .eventlist-column-thumbnail {
    width: 15%;
    padding-bottom: 5%;
}
  .eventlist-column-info {
    width: 85%;
}
</style>

 

Link to post

Wow almost there, I was able to tweak this to work, but the Event Date box is still sitting off the the right - how can I pull this back to the top right corner of the thumbnail container?

-Barry

Link to post
On 5/5/2021 at 8:03 AM, barrysutton said:

Wow almost there, I was able to tweak this to work, but the Event Date box is still sitting off the the right - how can I pull this back to the top right corner of the thumbnail container?

-Barry

Hi Tuan, did you happen to see this note? Still having an issue explained above. Thank you very much!

Link to post
10 hours ago, barrysutton said:

Hi Tuan, did you happen to see this note? Still having an issue explained above. Thank you very much!

Add this CSS

.eventlist-datetag {
    right: unset;
}

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...