Home Page Product Card **HELP**

[Pods10101]

Hello Everyone, I have a website in which on my home page, there is a product being shown and I want to center the title text and make the product image have rounded square edges. PLEASE SEE THE ATTATCHED IMAGE. Thanks!

MY STORE WEBSITE: www.gadget-pods.store

[Pods10101]

Hey Thanks But, Where do I put the css code?

[Pods10101]

Okay That Worked but there is one problem, you see how it says sale 35% on top of the image? I also want that to have rounded square edges

[Pods10101]

I also want to make the add to cart and buy now buttons with rounded square corners, how do I do that?

[Pods10101]

Okay that worked but the sale thing is not rounded still

[Pods10101]

Okay Sure Here: 

[devcoders]

Hello @Pods10101 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css.
Add the provided code at the end of the file.

.badge.sale-badge {
border-radius: 10px !important;
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px !important;
}

[Pods10101]

Hey There, This works but, I want it to match and be together with the image as it is looking a bit akward

[Pods10101]

Also how do I make the sale tag the red one, its size bigger as it looks small

[devcoders]

Hello @Pods10101 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css.
Add the provided code at the end of the file.

.productView-image .productView-img-container img:not(.zoomImg) {
border-radius: 10px;
}
.halo-productBadges .badge.sale-badge {
    background: red!important;
    font-size: 15px;
}