How do I circle crop images on my events page and my blog page?

Site URL: https://www.deepbelonging.org/program-calendar

Hello! I have successfully used CSS code to crop all images on my site to be circular. HOWEVER, this does not seem to work on the calendar (events) page or in the store. The images there seem to be thumbnail images, so I'm not sure if additional code is needed for these elements. Thank you! 

.sqs-block-image .image-block-outer-wrapper.image-block-v2 .intrinsic img {
border-width: 50%;
}

If you put the code in custom css all image blocks will be round, if you put it in the header of your blog, in a code block then only the blog images will be round. If you want only one post then put it in a code block in that post. You will want the code to look like this in a code block, and you can change it by adjusting the 50% to a larger or smaller number.

<style>

.sqs-block-image .image-block-outer-wrapper.image-block-v2 .intrinsic img { border-width: 50%; }

<style>

Hi there. Neither of those worked. I tried adding the CSS code and using the code block. Any other ideas?  

And just for a bit more info, the images on the blog posts are circles, but not the images on the main blog page. I think those are thumbnails. Same with the products in the store. So the issue seems to be thumbnails. In both cases, it seems that Squarespace automatically applies a 1:1 crop to those thumbnail images. 

The CSS code that I've used to crop all other images to circles is the following:

.sqs-block-image img{ border-radius: 50%; }

Hi, just seeing if you have any other ideas. Your suggestions did not work. Thanks! 

On 3/16/2021 at 9:52 PM, ez_belonging said:

And just for a bit more info, the images on the blog posts are circles, but not the images on the main blog page. I think those are thumbnails. Same with the products in the store. So the issue seems to be thumbnails. In both cases, it seems that Squarespace automatically applies a 1:1 crop to those thumbnail images. 

The CSS code that I've used to crop all other images to circles is the following:

.sqs-block-image img{ border-radius: 50%; }

Do you still need help

On 3/17/2021 at 11:56 PM, ez_belonging said:

Hi, just seeing if you have any other ideas. Your suggestions did not work. Thanks!