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

Store Design
, , ,

Topic summary

Goal: reduce the image banner text size on mobile while keeping the desktop size unchanged.

Clarifications: Responders asked for the store URL and access; the OP shared the URL and password, and reiterated the change is mobile-only.

Proposed solutions:

  • Add custom code in theme.liquid above the tag (one reply included steps and a result screenshot, but the actual code snippet was not present in the post).
  • Add a CSS media query (max-width: 749px) in base.css/style.css/theme.css to target banner elements (heading .h1, subtitle, and button text) with smaller font sizes and button padding. Detailed steps and a result screenshot were provided.

Technical note: A CSS media query applies styles only when the screen width is below a threshold, enabling mobile-specific formatting without affecting desktop.

Outcome/status: The OP has not confirmed implementation or results yet. The discussion remains open pending the OP’s feedback after applying the CSS changes.

Attachments: Multiple screenshots were shared to illustrate the mobile result of the proposed styling changes.

Summarized with AI on December 17. AI used: gpt-5.
1

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.

Screenshot 2024-10-13 at 20.55.12.png
Screenshot 2024-10-13 at 20.55.12.png839Ă—697 428 KB

Screenshot 2024-10-13 at 20.55.09.png
Screenshot 2024-10-13 at 20.55.09.png2237Ă—1233 328 KB

1 Like
2

Hey @ads_18

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

3

Hi @ads_18

Could you share your store URL so I can check?

4

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

password is mechaw

5

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

6

Hey @ads_18

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 tag

RESULT:

Moeed_0-1728925627412.png
Moeed_0-1728925627412.png364Ă—691 214 KB

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

Best Regards,
Moeed

7

Hi @ads_18

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

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