Rounded Picture Corners in Label Theme

Theme discussion Label
#1

Hi all,

I am trying to get rounded corners for all product pictures and thumbnails in the label theme. I basically managed this by adding border-radius: 20px; to the responsive-image class. However, the rounded corners are not there anymore as soon as an image is zoomed on hover (e.g. in a featured collection block) and during the picture change on the product page.

Does anyone have an idea how I could achieve rounded corners at all times?

Thank you very much!

#2

Hey there,

You were on the right track on this one. To have the rounded corners applied on hover as well, you can instead add the border-radius styling to the responsive-image-wrapper class that contains the images.

Replacing the responsive-image class with responsive-image-wrapper should resolve your issues.

Let us know if this helps :).

#3

Hi! Thanks lot for the reply. I had actually tried the responsive-image-wrapper class before. It generally works, but comes with two issues:

  • first, when a product has multiple pictures and you click through them with the slide show arrow buttons, the original sharp corners appear again during the sliding transition.
  • second, the responsive-image-wrapper doesn’t seem to affect the collection gallery or a featured collection block.

adding a border-radius to the gallery-image-cropped class doesn’t seem to do anything. Is there any other class for that that I’m currently overlooking?

#4

okay, for the second part concerning the gallery thumbnails I solved it now with the folowing selector:

.type-product-grid-item > .overflow-hidden {
  border-radius: 17px;
}

still, if there is a way to also have rounded corner while browsing through multiple product images, that would be great!

#5

Hey @emc2,

As a workaround, the CSS below should maintain the rounded corners when browsing through product images:

#productSplide *:not(button){
border-radius: 10px !important;
}

Let us know if this helps.