Rounding image corners

1 minute ago, Sadie said:

I am using a hover overlay, which does not round with the code. So, when I hover over the image the overlay is still sharp. Any suggestions?

I suspect this is because no one has asked for the overlay to be rounded so I haven't attempted to do that.

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

Sadie Aaron Designs 

That should work. I am also noticing that all my images are rounded. I just want the grid portfolio page (my projects page) rounded. 

Thanks!

3 hours ago, Sadie said:

I just want the grid portfolio page (my projects page) rounded. 

It appears you are not using my code. If you use my code and set the settings correctly you should be able to get the effect you want.

Hi @creedon

Thank you so much for provided this code. I copied it from your May 11 post (which I believe is the latest version) but I have similar behavior to what another forum member mentioned - some of the thumbnails in my grid summary blocks get rounded corners and others don't.

I've tried to be careful about following your directions but am still seeing the problem. I added the code to Website Settings/Custom CSS under the Pages tab.

Example pages -

arjunrihan.com/other2

arjunrihan.com/new-page

Site password - underconstruction

Would appreciate any help.

I think I figured out a solution to the problem in my previous post. Some of the images were not exactly 16:9 aspect ratio and only those were not being displayed correctly. Not sure why this matters, but cropping each image to 16:9 fixes the issue.

4 hours ago, ARI12 said:

I have similar behavior to what another forum member mentioned - some of the thumbnails in my grid summary blocks get rounded corners and others don't.

I have updated my cited code in my March 11, 2021 post earlier in this thread but not to necessarily address the issue you are having but something I noticed in my testing.

From the changes.

• another fix for summary block image border

I can't speak to the 16:9 aspect ratio but it is the case that if images have any errant border of their own, those need to be trimmed away. Otherwise the border effect will fail. The most common is a background color that surrounds the image but then there is another color outside of that such as white or transparent. Also this code is not perfect. I'm working within some constraints because of the code I'm given to work within by SS

I totally understand that this code is provided as-is and may not work in all cases. 
 

if it helps you, I think the 16:9 crop in my case helped because that was the setting I used for the thumbnails size. But this was only a problem with the grid summary block. Elsewhere on my site I have blogs, gallery blocks, individual images, and your code worked perfectly even with images of different sizes. 
 

Again this might just be because of a quirk with my site and I now have a workaround that helps me still use your code and have grid summary blocks. 
 

Thanks 

I rounded the image corners on my Simple List auto layout, BUT I only want to affect the Simple List on one page, without affecting the others.
How can I target that one page or section?

This is the site (no password)

This is the code I used:

// Auto Simple List - Card Border Radius //

.user-items-list-simple .list-item {
  border: 2px solid #eee;
  border-radius: 20px !important;
}

// Auto Simple List - Image Border Radius //

.user-items-list-simple .list-item img {
  border-radius: 20px !important;
}

1 hour ago, ForestFern said:

I only want to affect the Simple List on one page, without affecting the others.

You can use Heather Tovey's most excellent looking Squarespace ID Finder to find the block ID, section ID, or collection ID and use one of them to control the scope of the effect.

LIke so...

#block-yui_3_17_2_1_1714253811262_42899 .user-items-list-simple .list-item {
  border: 2px solid #159b93;
  border-radius: 12px;
}

#block-yui_3_17_2_1_1714253811262_42899 .user-items-list-simple .list-item img {
  border-radius: 12px;
}

Let us know how it goes.

Thank you!!! To clarify, this would go in the general Custom CSS section, but the block ID will affect where it actually changes the border radius?

1 minute ago, ForestFern said:

To clarify, this would go in the general Custom CSS section, but the block ID will affect where it actually changes the border radius?

Yes.

That worked great! Thanks so much!

@creedon Follow up question - when I round the image corners, it made the list item cards much narrower! (except in the top section, not sure why). Any idea why that might be happening?

It happened to all the cards in my accordion, here.

2 hours ago, ForestFern said:

when I round the image corners, it made the list item cards much narrower! (except in the top section, not sure why). Any idea why that might be happening?

I don't think the the rounding code is the issue. I disabled the rounding code locally and the differences between the accordion sections did change much.

It appears you are using a plug-in from Will Myers to achieve the inclusion of non text content in the accordion items.

I suggest contacting Will to see if he has any thoughts. Perhaps there are some setting to give a more even appears across the accordion items.

What's weird is that it only started happening when I input the rounding corners code. I've had the accordion for a few weeks now without the ratio of the images changing.

5 minutes ago, ForestFern said:

What's weird is that it only started happening when I input the rounding corners code.

You could remove ( make a copy somewhere ) or comment it out and see if it makes a difference.

Let us know how it goes.