How to resize event thumbnails?

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

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

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

8 hours ago, tuanphan said:

Have you solved yet?

If you share link, we can take a look

https://www.fortsferryfarm.com/events

password is farmlife

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

13 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

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

 

Awesome, thank you so much!

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. 

hw do you add thumbnail  to events on mobile

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

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

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

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>

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

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!

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

Brilliant thank you so much. 

I also need some help with this,

none of the options above seem to be working for me 

www.theshootingchannel.co.uk

thanks in advance

On 1/17/2023 at 11:43 PM, Davidson said:

I also need some help with this,

none of the options above seem to be working for me 

www.theshootingchannel.co.uk

thanks in advance

You mean events on this page? and do it on mobile, desktop or all devices?

https://www.theshootingchannel.co.uk/events-unlinked

Hi @tuanphan,

I would like to have the columns divided 50/50 wile keeping the img height the same, while either filling the container with image 100% or aligning the object to right and having the empty space of the column on the right (align: right).

When I paste this code in Custom CSS

.tweak-events-stacked-thumbnail-size-43-four-thirds .eventlist-column-thumbnail { width: 65% !important;}
.event-list-column-info { width: 35% !important; }
/* resize events */
article.eventlist-event img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}

I get it to work BUT only on the page I see when logged in. It doesn't show on the live site and the code doesn't work in Page Header.  I have no idea how can that be, do you maybe?

Thanks in advance!

On 1/21/2023 at 3:20 AM, katarina88 said:

Hi @tuanphan,

I would like to have the columns divided 50/50 wile keeping the img height the same, while either filling the container with image 100% or aligning the object to right and having the empty space of the column on the right (align: right).

When I paste this code in Custom CSS

.tweak-events-stacked-thumbnail-size-43-four-thirds .eventlist-column-thumbnail { width: 65% !important;}
.event-list-column-info { width: 35% !important; }
/* resize events */
article.eventlist-event img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}

I get it to work BUT only on the page I see when logged in. It doesn't show on the live site and the code doesn't work in Page Header.  I have no idea how can that be, do you maybe?

Thanks in advance!

Hi,

What is site url?