How to reduce the Banner heading text for mobile only

Vince111
Explorer
51 3 2

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!

Replies 2 (2)

PageFly-Amelia
Navigator
316 96 138

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:

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!


PageFly - #1 Page Builder for Shopify merchants.


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


Optimize your store’s mobile shopping experience with the Blum theme.

ThePrimeWeb
Shopify Partner
2088 598 467

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.

ThePrimeWeb_0-1714571046501.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!