change image banner text on mobile, but keep the same on desktop

[ads]

Hi, i want to change the font size for my image banner on my mobile, as i think its too big. However, I like the size like that on the desktop version so how do i change it so that its smaller for mobile, but stays the same size on mobile.

[Moeed]

Hey @ads 

I'm guessing you only wanna change the font size of Desktop then please share your store url and password if enabled.

Best Regards,

Moeed

[ads]

no i want to change the font size on mobile, not desktop. store url is https://05ab08-9f.myshopify.com/ and password is mechaw

[Moeed · Accepted solution]

Hey @ads 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.banner__heading {
    font-size: 20px !important;
}
.banner__text.rte.subtitle p {
    font-size: 12px !important;
}
a.button.button--secondary {
    font-size: 10px;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Dan-From-Ryviu]

Hi @ads 

Could you share your store URL so I can check? 

[ads]

https://05ab08-9f.myshopify.com/

password is mechaw

[Made4uo-Ribe]

Hi @ads 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (max-width: 749px) {
.banner__box.content-container .h1 {
    font-size: 2.5rem;
}

.banner__text.rte.subtitle {
    font-size: 1.3rem;
}

.banner__buttons a {
    font-size: 1.2rem;
    padding: 0 1rem;
}
}

• And Save.
• Result:
  

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!