How to reduce the Banner heading text for mobile only

Vince111 · ‎05-01-2024

Hi,

store url: maevincollection.com

How to change the text size of banner header for mobile only?

I like how it looks on desktop but on mobile it's too big and overlapping.

please help. Thanks!

PageFly-Amelia · ‎05-01-2024

Hello @Vince111

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Store -> Themes -> Edit Code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

<style>
@media (max-width: 767px) {
.banner__content .banner__heading {
   font-size: 20px !important; /* Font size for heading */
}

.banner__content .banner__text {
   font-size: 16px !important; /* Font size for text*/
}
}
</style>

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
➜ Weekly updated Shopify tutorials on YouTube

All features are available from Free plan. Live Chat Support is available 24/7.

ThePrimeWeb · ‎05-01-2024

Hey @Vince111,

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.

15px is the heading, 12px is the text description below it. Change these values as you like

<style>
@media only screen and (max-width: 989px) {
    .banner__box .banner__heading {
       font-size: 15px !important;
    }
    
    .banner__box .banner__text {
       font-size: 12px !important;
    }
}
</style>

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

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!

How to reduce the Banner heading text for mobile only

How to reduce the Banner heading text for mobile only

☕Buy me a coffee☕

Community Blog Articles