Help?! Rounded buttons appear on customization page but not on mobile version.

[LumoGalaxy]

So I added some lines of code into my base.css file to make the buttons more rounded. This is the code:

And now it looks like this in the shopify customization page:

but for some odd reason, when I check the website on my ACTUAL mobile then this happens:

The buttons arent rounded anymore? Can some expert help me? I checked with the support and they advised me to seek support in this forum. I appreciate any help I can get, thank you.

[sahilsharma9515]

Hi @LumoGalaxy There are 2 solution for this problem.

1. The issue you are facing is due to cache, so you need to remove the cache from your mobile or you can try to open the site in private window.
2. If you have completed 1st step and it didn’t solved your issue then you need to add the same code like this.

@media screen and (min-width: 600px) {
Add your code here like
font-size: 10px; // Remove this add your actual code
}

Also add this line just under the code that you have written, and don’t remove the code that you have added, you need to add that code inside this query as well.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

[LumoGalaxy]

Like this?:

@media screen and (min-width: 600px) {
.button,.button:before,.button:after{
border-radius: 10px; !important;
}

Im trying and its not working

[LumoGalaxy]

Nevermind I figured it out the simple way instead of coding a bunch. On the customization page of your theme, just go to Theme Settings>Buttons and then change the radius of the ALL the buttons on your website using this:

lol