Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Discount badges are too big on Shrine Theme

Solved

Discount badges are too big on Shrine Theme

robertbarta
Explorer
71 0 15

Hello, I am using a Shrine Theme on my Shopify store, and for some reason, the discount badges on mobile view are displaying extremely large. On Desktop it looks great, it just looks a little weird when viewing on mobile. is anyone able to fix this? Here is the link to my website so you can view it for yourself:

https://evagleam.com

 

Desktop:

EvaGleam · Customize EvaGleam Live · Shopify - Google Chrome 4_21_2024 3_55_01 PM.png

Mobile:

EvaGleam · Customize EvaGleam Live · Shopify - Google Chrome 4_21_2024 3_55_08 PM.png

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2139 616 512

This is an accepted solution.

Hey @robertbarta,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 989px) {
    .badge {
        font-size: 1rem !important;
    }
    
    .card--media .card__inner .card__content {
        padding-top: 5px !important;
        padding-left: 5px !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1713745484121.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Reply 1 (1)

ThePrimeWeb
Shopify Partner
2139 616 512

This is an accepted solution.

Hey @robertbarta,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 989px) {
    .badge {
        font-size: 1rem !important;
    }
    
    .card--media .card__inner .card__content {
        padding-top: 5px !important;
        padding-left: 5px !important;
    }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1713745484121.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!