Jump to content

How to create rounded corners for all images on the Kester template home page?

Go to solution Solved by dunkin,

Recommended Posts

Hello, I'm using the Kester template, and am wondering if someone can tell me how to round the corners of all the images on the home page?

Here's the Kester home page:

https://kester-demo.squarespace.com/

 

And here's a similar question about the Gallery block. (I had originally asked my question in this post, but not sure if anyone saw it.)

This solution works great, but since I don't know CSS, I'm unsure how to adapt the code for the Kester template!

 

 

Hope someone can help, and thank you in advance!

Edited by dunkin
Link to comment

@dunkin Hi! You can add this code in Website > Pages > Website Tools > Custom CSS to round the corner of the images. 

.portfolio-grid-overlay .grid-item .grid-image {
    border-radius: 30px;
}

 

Edited by Lesum
Missing dot

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@Lesum Thank you so much! Unfortunately it doesn't seem to be working, but that's probably because I don't know what I'm doing 😅

Here's what I have in the Custom CSS section:

image.png.621da9575949dbf75e601829c3ba9fb1.png

 

And here's what the corners on my Portfolio page still look like:

 

image.png.5beb9f9f6b90003454b85b448fdd2384.png

 

 

Any thoughts? Thank you again

 

 

 

 

Link to comment

The code was missing a dot

.portfolio-grid-overlay .grid-item .grid-image {
    border-radius: 30px;
}

Screenshot 2024-07-11 at 07.04.41.png

Edited by sorca_marian
Link to comment

Hi @Lesum and @sorca_marian, thank you so much for your help. Unfortunately it's still not working...! I've checked to make sure the dot is included, but the corners are still square.

Maybe it's something to do with my page? My page is enabled, and I've tried putting it into the Main Navigation section (instead of Not Linked, where it currently is because I'm working on it), but that doesn't seem to help.

Here's what my Custom CSS section currently looks like:

image.png.435a7f0644867d56f68e10c847f29598.png

 

And here's what my Pages section looks like:

image.png.50784d982c19adca1b6ba6f693f70571.png

 

A couple of notes:

  • The Home page has rounded corners -- that's working fine.
  • The Work page (original title 'Portfolio'; I renamed it) is the one whose image corners are still square.
    • Ideally, I'd like to use the Work page (aka Kester template) as my home page because of the template structure -- I need the project pages and the bottom navigation.
    • I could just do square corners, but am hoping for rounded corners because I'm trying to look contemporary. 😅

 

Thank you again! Really appreciate your help.

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.