Rounding corners of portfolio/gallery thumbnails

Site URL: https://www.heynibras.com

Hi all,

I'd like to round the corners of the images displayed on my homepage in the gallery/portfolio thumbnail section. I've scoured the forums and tried all the CSS solutions suggested in the answers so far but nothing seems to work. Would love and appreciate some help 🙏🏽

Thanks!

10 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Round corners portfolio items */
body.homepage a.grid-item, body.homepage .grid-image {
    border-radius: 10px;
}

 

Thank you so much!

How do you apply this effect to all portfolio pages?

4 hours ago, ZACELA258 said:

How do you apply this effect to all portfolio pages?

 

Use this code

/* Round corners portfolio items */
a.grid-item, .grid-image {
    border-radius: 10px;
}

Hey @tuanphan Thank you so much for this! However, this is not working on my project thumbnails on my site. Can you help me figure out why? I am using "Gallery" images for my projects is this why? Heres my site:
adamnienow.com

I found a chrome extension that told me these are collection items "#collection-656fce0fe76c107c57b7996e"

Do I need to paste this into the code somewhere?

On 12/7/2023 at 5:02 AM, NienowBrand said:

Hey @tuanphan Thank you so much for this! However, this is not working on my project thumbnails on my site. Can you help me figure out why? I am using "Gallery" images for my projects is this why? Heres my site:
adamnienow.com

I found a chrome extension that told me these are collection items "#collection-656fce0fe76c107c57b7996e"

Do I need to paste this into the code somewhere?

Use this code

article.index-item.has-item-image, article.index-item.has-item-image figure {
    border-radius: 15px !important;
}

Hi @tuanphan, I've successfully used your code above for rounded corners:

/* Round corners portfolio items */ body.homepage a.grid-item, body.homepage .grid-image { border-radius: 10px; }

How could this be adjusted so the rounded corners are maintained when hovered over? At the moment, hover turns my index images square again. 

Thank you!

55 minutes ago, Squashy15 said:

How could this be adjusted so the rounded corners are maintained when hovered over? At the moment, hover turns my index images square again.

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.

Hey @tuanphan I'm back 😅 I updated my homepage to be a gallery rather than projects and I can't for the life of me figure out the rounded corners code. Would you be able to help me out?

Adamnienow.com

On 8/23/2024 at 12:21 AM, NienowBrand said:

Hey @tuanphan I'm back 😅 I updated my homepage to be a gallery rather than projects and I can't for the life of me figure out the rounded corners code. Would you be able to help me out?

Adamnienow.com

You can use this to Website Tools > Custom CSS

body.homepage div.slide img {
    border-radius: 30px !important;
}

@tuanphan Thank you SO much, that looks so good! It looks like it rounded the corners of my Instagram bar in my footer, but it isn't rounding the videos pulled from my instagram. Do you have any thoughts on a line of code for that? I really appreciate your help!

On 8/27/2024 at 7:19 AM, NienowBrand said:

@tuanphan Thank you SO much, that looks so good! It looks like it rounded the corners of my Instagram bar in my footer, but it isn't rounding the videos pulled from my instagram. Do you have any thoughts on a line of code for that? I really appreciate your help!

You can add this extra code

div.instagram-block .sqs-video-wrapper.video-fill {
    border-radius: 12px;
    overflow: hidden;
}