Baseline theme - Rounded corners for product images

Store Design
1

Hi!

I would like to add rounded corners to the product divs for my website. I’m using paid template called baseline. Where do I input the code (with mobile responsiveness)?

My website is:

www.wackywears.co

password: justwack03

1 Like
2 
.w-full {
    width: 100%;
    border-radius: 50px !important;
}

@niwa00 Try this code.

1 Like
3

Hi!

How do I make sure that the border is still applied when it hovers to the second product image?

4

@Zworthkey Hi! It works but the rounded corners disappear when we hover to the second image. How do I make sure it stays during hover?

1 Like
5 
.w-full:hover {
    width: 100%;
    border-radius: 50px !important;
}

Add this

6

Screenshot 2022-01-11 at 5.37.25 PM.png
Screenshot 2022-01-11 at 5.37.25 PM.png466×658 39.2 KB

@Zworthkey I added the code but it does not show the rounded corner at hover (see picture)

7

@Zworthkey Hi! The rounded corners did not show on hover. Do you know how to adjust this?

1 Like
8

@niwa00

Please add the following CSS code to your assets/theme.min.css bottom of the file.

.product-item-hover{width: 100%;border-radius: 20px !important;}

Thanks!

1 Like
9

Do you know how to round corners for the Palo Alto theme?