I’m having issues with product image border radius not working at all for the shop page.
I have tried to use the BORDER/BOX SHADOW settings but nothing there works. When looking at the shop page, and trying to edit the product images to make them have soft corners, I can’t find a class that works for Custom CSS to make the radius show.
Any helpful hints would be great.
Also, I am having issues with the images not being the same size for all columns. I don’t know how to get them all to show as the same size on the shop page.
I’m sorry. Did I post in the wrong place? Or does nobody know of this issue? I’d be happy to find out what I am doing wrong if nobody else has this issue.
try something like this in style > css > custom css of the product element
root li {
border-radius: 4px ;
background: #fff ;
/box-shadow: 0px 0px 5px 1px #bebebe;/
border:1px solid #efefef;
}
Doesn’t work for me. I’ve tried it. I haven’t found anything that works with the product images on the shop page. Though, one would expect that the settings provided by Bricksbuilder would work with the images.
i assume you use the products element right ? so at least for me this works : root li img {border-radius:50%; box-shadow: 0px 0px 5px 1px #bebebe;}
I guess a bit of css for individual styling does not hurt and I quite like it how we can customize quite everything in Bricks to fit our needs. and don’t forget we are only at v. 1.3+ so things will get even better down the road.
My apologies. I should have noticed that the “img” was left out of the first example you provided. Yes, I like your oval images. That’s pretty nice looking.
Yes, I am using the products element. I was trying to get the CSS to work without “li”. I had the root img previously. But when you offered the example “root li” it didn’t work for me. I should have added the “img”. I’d have had a much different response.
Thank you Markus.
I still have the issue of images showing different sizes in the products though. I don’t have any idea how to fix that either.
how about setting height:300px; or what ever suits you. (ideally the height of your smallest product img) leave the width as is to preserve the aspect ratio.
