⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
Becca, I'm so addicted to your CSS vids! Thank you for all the helpful tips! Question: I'm working in a gallery section. I noticed the thumbnails changed to rounded corners but not the gallery images themselves. Any help please? TIA, Chris
Interesting! It's likely the image container is cutting off the egde of your images so you can't see the curved corner. Try applying the code to your gallery wrapper. You'll find a list of codes by gallery type in the gallery page section of the CSS cheat sheet.
DANG, this is a super helpful tip! It gives a nice subtle change to my site and I love it. Really appreciate your videos and thanks for sharing your knowledge. Just bought you a coffee! =^)
This is so helpful, thank you!! Question - what if you have a photo as a section background? I noticed the rounded edge code affects that as well, how can we isolate the section background photo to be 90 degree corners??
Great question Jessie! You can add this code after the border radius one that will reset all section backgrounds: .section-background img{boder-radius: 0!important}
Definitely heading to your course, so helpful and easy to use! 😊 I added to the site however all the images were rounded except the BLOG Thumbnail images?
Kevin, that doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.
Hi Becca and thank you so much for your tutorial! Is it possibile to round corner for video?? I tried with .sqs-video-wrapper{border-radius:30px!important;} but nothing...
That's a great question! For embedded videos, we have to go a little deeper into the code than the top wrapper layer. Give this snippet a try & let me know how it goes: .sqs-video-wrapper { border-radius:15px }
You can combine different property and value combos by separating them with a semi colon. I have a free guide on CSS basics if you need some more info about it: insidethesquare.co/learn
Google maps aren't images so you'll need to add that selector to your code. You can try .page-map but i'm not sure if that will work for the embeded version - best of luck!
@@InsideTheSquare Thanks for getting back to me. I actually found a code that worked and will post here in case anyone else needs it: .map-block>div { border-radius: 20px; } Thanks again! 🙏
Hello, I am new to all this. How would I go about if I just want to change the portfolio project covers to rounded and not every image. Is there a better way to do that so that it does not affect all of the images?
Never mind I think I got it! Instead of selecting the Block Id I just copied the section ID of the project covers and instead of { border-radius: 0; } did { border-radius: 20px; } and it seemed to work! Hopefully I did not mess anything up as I don't know coding.
Embedded images like page section backgrounds or images set to fill instead of fit are cut by the parameters of the block they are in. You’ll need to reduce the size of the image or add the border radius to the section background/content block selector.
Hey Becca, hope you're good! Is there a way to exclude all product images too, on product pages (not shop grid)? This works fab for a design I currently have but I'd like to exclude all product imagery as it uses the half/half product page. Thank you! Sarah
Hey Sarah, I am not quite sure what you are trying to create but I would love to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
Hi Becca! Great content! Is it possible to round corner for the Video Containers? I tried using your code with video-block .video-player { border-radius: 30px; } but I don't see any changes. Thanks
Hey Diego! If you want this for a video block, and not a video collection page, try giving a border radius to the video wrapper like this: .sqs-video-wrapper{border-radius:30px!important;}
⚠️ IMPORTANT CSS UPDATE ⚠️ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
this is such a helpful short code! Thank you!
You're so welcome - happy to help!
Becca, I'm so addicted to your CSS vids! Thank you for all the helpful tips! Question: I'm working in a gallery section. I noticed the thumbnails changed to rounded corners but not the gallery images themselves. Any help please? TIA, Chris
Interesting! It's likely the image container is cutting off the egde of your images so you can't see the curved corner. Try applying the code to your gallery wrapper. You'll find a list of codes by gallery type in the gallery page section of the CSS cheat sheet.
DANG, this is a super helpful tip! It gives a nice subtle change to my site and I love it. Really appreciate your videos and thanks for sharing your knowledge. Just bought you a coffee! =^)
You are so welcome! 🤩 Your comment just made my day - thank you so much for letting me know!
This is so helpful, thank you!! Question - what if you have a photo as a section background? I noticed the rounded edge code affects that as well, how can we isolate the section background photo to be 90 degree corners??
Great question Jessie! You can add this code after the border radius one that will reset all section backgrounds:
.section-background img{boder-radius: 0!important}
Definitely heading to your course, so helpful and easy to use! 😊 I added to the site however all the images were rounded except the BLOG Thumbnail images?
Kevin, that doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.
Hi Becca and thank you so much for your tutorial! Is it possibile to round corner for video?? I tried with .sqs-video-wrapper{border-radius:30px!important;} but nothing...
That's a great question! For embedded videos, we have to go a little deeper into the code than the top wrapper layer. Give this snippet a try & let me know how it goes:
.sqs-video-wrapper {
border-radius:15px
}
Is this able to be combined with the zoom hover effect? If so how would you write that code?
You can combine different property and value combos by separating them with a semi colon. I have a free guide on CSS basics if you need some more info about it: insidethesquare.co/learn
Hi Becca! Great video. I noticed it does not affect the google map corners. Is there a code to round those corners as well? Thanks for your help? 🙏
Google maps aren't images so you'll need to add that selector to your code. You can try .page-map but i'm not sure if that will work for the embeded version - best of luck!
@@InsideTheSquare Thanks for getting back to me. I actually found a code that worked and will post here in case anyone else needs it:
.map-block>div {
border-radius: 20px;
}
Thanks again!
🙏
Hello, I am new to all this. How would I go about if I just want to change the portfolio project covers to rounded and not every image. Is there a better way to do that so that it does not affect all of the images?
Never mind I think I got it! Instead of selecting the Block Id I just copied the section ID of the project covers and instead of { border-radius: 0; } did { border-radius: 20px; } and it seemed to work! Hopefully I did not mess anything up as I don't know coding.
So happy to hear you solved it!
what about embedded images? they are staying 90 degree?
Embedded images like page section backgrounds or images set to fill instead of fit are cut by the parameters of the block they are in. You’ll need to reduce the size of the image or add the border radius to the section background/content block selector.
Hey Becca, hope you're good! Is there a way to exclude all product images too, on product pages (not shop grid)? This works fab for a design I currently have but I'd like to exclude all product imagery as it uses the half/half product page. Thank you! Sarah
Hey Sarah, I am not quite sure what you are trying to create but I would love to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
@@InsideTheSquare Hey Becca! I tried but it says your inbox is full. Any ideas on when you may open it up again and I'll try then? 🤞🏼
⭐ Learn Squarespace CSS basics in my FREE class: insidethesquare.co/learn
Hi Becca! Great content! Is it possible to round corner for the Video Containers? I tried using your code with video-block .video-player { border-radius: 30px; } but I don't see any changes. Thanks
Hey Diego! If you want this for a video block, and not a video collection page, try giving a border radius to the video wrapper like this: .sqs-video-wrapper{border-radius:30px!important;}