Make text smaller on Mobile and larger on Desktop

Store Design
1

Hi,

The website is https://bf1w9g6dke3e770n-29280075912.shopifypreview.com

and I’m trying to get the top of the website link that says “purchase all-natural treats” to be in 17 font size on mobile and 30 font size on desktop. The shopify preview will shop a change in font but when you go “live” the change doesn’t happen (yes, I did add the new code to the live store)

issue.JPG
issue.JPG520×266 12.5 KB

Here is the first solution that worked for a short while then the font change disappeared (doesnt work anymore):

}
@media only screen and (max-width: 749px) {
span.overlay__link.feature-link.cc-animate-init.-in.cc-animate-complete {
font-size: 17px !important;
}
}

@media only screen and (min-width: 992px) {
span.overlay__link.feature-link.cc-animate-init.-in.cc-animate-complete {
font-size: 30px !important;
}
}

2

Hi Arron,

Unfortunately without seeing the issue on the live site, I’m not sure what we can do, as it seems to work the way it should on the preview and looks like it should work as a code snippet.

3

@ArronJW

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Hi,

I replied via messenger. Thanks

5

Hi Mike,

Here is the Live URL (didnt want to include the URL on the thread because google bot crawlers) https://bit.ly/3l0KUuk