creedon Posted March 3 Share Posted March 3 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Sadie Posted March 3 Share Posted March 3 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! Link to comment
creedon Posted March 3 Share Posted March 3 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
ARI12 Posted April 20 Share Posted April 20 (edited) 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. Edited April 20 by ARI12 Link to comment
ARI12 Posted April 20 Share Posted April 20 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. Link to comment
creedon Posted April 20 Share Posted April 20 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 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
ARI12 Posted April 21 Share Posted April 21 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 creedon 1 Link to comment
ForestFern Posted May 14 Share Posted May 14 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; } Link to comment
creedon Posted May 14 Share Posted May 14 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. ForestFern 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
ForestFern Posted May 14 Share Posted May 14 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? Link to comment
creedon Posted May 14 Share Posted May 14 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
ForestFern Posted May 15 Share Posted May 15 That worked great! Thanks so much! creedon 1 Link to comment
ForestFern Posted May 15 Share Posted May 15 (edited) @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. Edited May 15 by ForestFern Link to comment
creedon Posted May 15 Share Posted May 15 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
ForestFern Posted May 15 Share Posted May 15 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. Link to comment
creedon Posted May 15 Share Posted May 15 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. ForestFern 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
ForestFern Posted September 17 Share Posted September 17 Hi! I am back with another rounding corners problem, on a gallery block section. The site is ianlane.pro, no password. Under "About Coach Ian," I have a gallery block (grid) that I want to round the corners on every image. I've tried 3 different code variations with no luck. Here's what I've tried: .sqs-gallery-design-grid-slide img { border-radius: 10px !important; } section[data-section-id="66d7b1571e338a158fa44276"] .slide-media-container { border-radius: 12px !important; } #block-yui_3_17_2_1_1725477114222_41029 .user-items-list-simple .list-item { border-radius: 12px; } #block-yui_3_17_2_1_1725477114222_41029 .user-items-list-simple .list-item img { border-radius: 12px; } What am I missing here? Thank you! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment