Make Buttons Rounded in Popup

[martujv]

Hello, 

I want to make all my buttons rounded in my website's popup, but the "join" button doesn't convert for some reason. Also, the whole banner should be rounded instead of being inside a square with straight corners.

This is how it looks now:

As you can see, the "join" button is not rounded for some reason.

And the whole banner should be rounded instead of being inside a straight square.

My website is: https://guq3mp7j97oj09we-60150284501.shopifypreview.com and my theme is Stiletto.

I've been trying to figure this out for a while so I would really appreciate some help!

[Zoeyharp]

Hi Martujv, 

Kindly provide your store URL for proper check out.

[martujv]

https://guq3mp7j97oj09we-60150284501.shopifypreview.com

[Zoeyharp]

Good.

Your store is on preview and yet to be open. I can't check out your store without password.

Kindly drop your email so as to discuss how to resolve it.

Best regards,

[Zoeyharp]

Hi Martujv,

Willing to get this solve? Waiting for you response.

[GTLOfficial]

HEllo @martujv 
Go to online store ----> themes ----> actions ----> edit code ----> theme.css
add this code at the end of the file and save.

@media (min-width: 720px) {
.popup.popup--has-image.popup--image-is-adjacent .popup__image {
border-top-left-radius: 1rem !important;
border-bottom-left-radius: 1rem !important;
}
.popup__content {
border-radius: 1rem !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[martujv]

Hey! Thanks for your help, but sadly, it didn't work:

For some reason, everything appears correct inside the page editor, but once I publish it, the "join" button only turns rounded when you hover over it, otherwise it appears straight. And the pop up doesn't show up with rounded corners. Maybe I have some conflicting codes within my CSS, I don't know.