Round corners of Thumbnails Avenue

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

Round off corners of thumbnail images, index grid Avenue. 

I have tried code but to no avail. Luckily nothing bad happens to my Index, but not what I am trying to do either. I want to round off the corners of the thumbnails in the grid. If it is possible. This is the last bit of code I used in custom CSS:

.collection-type-index.index-detail div#grid
img{
    border-radius:1%;
}
 

Can you share link to exact page?

That does help doesn't it. 

https://myrandomviews.com/views-images

3 minutes ago, derricksrandomviews said:

That does help doesn't it. 

https://myrandomviews.com/views-images

Add to Home > Design > Custom CSS

body#collection-55342f9fe4b003aefe420900 a.project .content-fill {
    border-radius: 50%;
}

Terrific! It worked, I can adjust it from 0 to 50 and then I can shrink the circles and make them smaller. I have it set to 5 percent. Looks good. Thanks

tuanphan. I could not figure out what was missing in all the code combos I used. 

1 minute ago, derricksrandomviews said:

Terrific! It worked, I can adjust it from 0 to 50 and then I can shrink the circles and make them smaller. I have it set to 5 percent. Looks good. Thanks

tuanphan. I could not figure out what was missing in all the code combos I used. 

see screenshot, .content-fill = image width

image tag = image + left/right white, so it wont work.

Makes sense, I had the section id in an  earlier bit of code, but used the image tag. You hit it right on the head. 

On 5/19/2020 at 8:34 AM, tuanphan said:

see screenshot, .content-fill = image width

image tag = image + left/right white, so it wont work.

On 5/19/2020 at 8:23 AM, tuanphan said:

Add to Home > Design > Custom CSS

body#collection-55342f9fe4b003aefe420900 a.project .content-fill {
    border-radius: 50%;
}

 

I have the avenue template 7.0 and this didn't work for me. I copy pasted the above into Home, design, custom CSS and nothing changed. Can you help @tuanphan?

On 11/6/2021 at 1:01 AM, erica_ericacatherine84 said:

 

I have the avenue template 7.0 and this didn't work for me. I copy pasted the above into Home, design, custom CSS and nothing changed. Can you help @tuanphan?

Try this code

a.project .content-fill {
    border-radius: 50%;
}

Hello,
I tried this but it only works if I resize the window it seems to default to the edged corners. Here is my webpage:
https://www.andrewmoussa.com/ 

On 1/16/2024 at 4:04 AM, AndrewSe7s said:

Hello,
I tried this but it only works if I resize the window it seems to default to the edged corners. Here is my webpage:
https://www.andrewmoussa.com/ 

Which screen sizes & Can you take a screenshot? I tried resize browser and it still looks fine

On 1/17/2024 at 4:46 AM, tuanphan said:

Which screen sizes & Can you take a screenshot? I tried resizing browser and it still looks fine

Here are the before and after resizing Windows screenshots. it seems that whatever size my window loads in it starts off not rounded when I resize my browser it registers.

On 1/20/2024 at 1:37 AM, AndrewSe7s said:

Here are the before and after resizing Windows screenshots. it seems that whatever size my window loads in it starts off not rounded when I resize my browser it registers.

Don't remove code I sent, add this code under

body#collection-56ccfe89c2ea5165a6f983a1 .sqs-gallery-design-autocolumns-slide img {
    border-radius: 30px !important;
}

On 1/21/2024 at 4:10 AM, tuanphan said:

Don't remove code I sent, add this code under

body#collection-56ccfe89c2ea5165a6f983a1 .sqs-gallery-design-autocolumns-slide img {
    border-radius: 30px !important;
}

 

Thank you so much this worked great.

On 1/21/2024 at 4:10 AM, tuanphan said:

Don't remove code I sent, add this code under

body#collection-56ccfe89c2ea5165a6f983a1 .sqs-gallery-design-autocolumns-slide img {
    border-radius: 30px !important;
}

 

Could you help me do this as well? Having trouble with the previous code for my site. 

https://www.brndnyn.com/

On 2/21/2024 at 10:41 AM, brndnyn said:

Could you help me do this as well? Having trouble with the previous code for my site. 

https://www.brndnyn.com/

You can use this CSS code

a.project, .project-image, a.project div {
    border-radius: 50px;
}

On 2/23/2024 at 8:30 PM, tuanphan said:

You can use this CSS code

a.project, .project-image, a.project div {
    border-radius: 50px;
}

Thanks for sending- only seems to work if the window is made a lot smaller. Any suggestions? 

On 2/27/2024 at 2:18 AM, brndnyn said:

Thanks for sending- only seems to work if the window is made a lot smaller. Any suggestions? 

I see you edited code I sent

I sent this

but you added this, because you added code in max-width 767px so the code will run with screen sizes under 767px only

You can move my code to top of Custom CSS box, and don't wrap it with any code around

that worked. thank you!