Shopify themes, liquid, logos, and UX
Hi,
I would like to get round corners on all images, except for the slideshow images and full side-to-side images.
I'm using the prestige theme.
Can anyone help?
www.cutegeek.dk (Code: 1234)
Solved! Go to the solution
This is an accepted solution.
Please add the following code at the bottom of your assets/theme.css file.
.CollectionItem__ImageWrapper {
border-radius: 25px ;
overflow: hidden;
}
Hope this helps.
Thanks!
Please add the following code at the bottom of your assets/theme.css file.
.Image--lazyLoaded.Image--fadeIn {border-radius: 7px;overflow: hidden;border: 1px solid #dddddd;}
@media screen and (min-width: 1008px){
.Product__Gallery--stack .Product__Slideshow .Image--lazyLoaded.Image--fadeIn {
border-radius: 7px;
overflow: hidden;
border: 1px solid #dddddd;
}
}
Hope this helps.
Thanks!
@dmwwebartisan Thanks, it works on most of the images.
Now it's only the collection images that also needs to be rounded - do you know how? 🙂
It's these:
This is an accepted solution.
Please add the following code at the bottom of your assets/theme.css file.
.CollectionItem__ImageWrapper {
border-radius: 25px ;
overflow: hidden;
}
Hope this helps.
Thanks!
@dmwwebartisan Thanks, I removed "Image" from _ImageWrapper, and then it worked 🙂
Could you help me with an update to this code for 2024. I am using the prestige theme as well but doesnt round the corners when I load into the assets/theme.css file
thanks a lot 🙂
Any other problem Let me know.
Thanks!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024