Looking to make text smaller on mobile and larger on desktop

ArronJW
Excursionist
17 1 5

My website: https://xzvcbynb1ebsrhd4-29280075912.shopifypreview.com

Looking for the text above the bag image to read 17 font on mobile and 30 font on the desktop.  Currently the custom code makes the words appear at the top, however, I cannot get the text to be responsive.

.block-163650005194bcaa71-0 .overlay .inner {justify-content: start;}

 

Thanks for any help!

Replies 6 (6)
Zworthkey
Shopify Partner
2571 309 641

Hii, @ArronJW 
Kindly share a screenshot of your problem so,
I can solve it perfectly.
Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ArronJW
Excursionist
17 1 5

Hi, 

Below is the text that isn't 17 font on mobile and 30 on desktop.

issue.JPG

Zworthkey
Shopify Partner
2571 309 641

@ArronJW 
Paste this code on top of the styles.css file.

@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;
}
}

Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com

PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dmwwebartisan
Shopify Partner
9826 2237 3078

@ArronJW 

1. Go to your store. Click on Actions > Edit Code 2. Go to Assets > styles.css add below lines at the bottom of the file.  

@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;
}
}

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
ArronJW
Excursionist
17 1 5

Thanks so much!!! This was a really fast solution!

ArronJW
Excursionist
17 1 5

Hi!

 

Unfortunately the update doesn't work anymore.  I haven't changed the code at all.  The fix works on the shopify preview display but not in real time on the official URL.  

 

code.JPG