How can I adjust the banner heading font size only on desktop?

Store Design
, ,

Topic summary

A user needed to adjust banner heading font size specifically for desktop view on their Shopify store (amberound.com), while keeping mobile sizing unchanged.

Solution Provided:
Multiple approaches were shared, with the successful method involving:

  • Adding CSS code to theme.liquid file before the </body> tag
  • Using a media query targeting desktop screens (min-width: 767px)
  • Applying font-size adjustments to .banner__heading class with !important flag

Additional Requests:
The original poster also asked about adjusting the smaller “Women’s Jewelry” text below the heading, which was resolved using similar CSS targeting .banner__box .banner__text p with appropriate font-size values.

Alternative Approach:
Another user suggested modifying the section-image-banner.css file directly and using viewport width (vw) units for responsive sizing, providing separate media queries for desktop (min-width: 749px) and mobile (max-width: 749px) breakpoints.

Status: Resolved - The issue was successfully addressed with working CSS code examples.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have a problem with banner.heading font size. I want to change font size, but ONLY ON DESKTOP.

Website: amberound.com

Before:

font size.JPG
font size.JPG1360Ă—508 98.2 KB

After:

font size1.JPG
font size1.JPG1292Ă—291 57.1 KB

Thanks!

1 Like
2

Hi @Atsimataves

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “section-image-banner.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 only screen and (min-width: 749px){
.slideshow__text.banner__box .banner__heading {
    font-size: 50px;
}
}

And Save.

Result:

Made4uoRibe_0-1704991512137.png
Made4uoRibe_0-1704991512137.png723Ă—394 359 KB

You can adjust the sizes you like.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Hello @Atsimataves

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width:767px){ .banner__heading { font-size: 30px !important; } .banner__box{ left:-28% !important; } }

techlyser_web_0-1704992358674.png
techlyser_web_0-1704992358674.png763Ă—338 348 KB

1 Like
4

@niraj_patel , boooom! It works. :)) May I know if I want to change the text below how I can do that? Now it looks a little too small “Women’s Jewelry”.

Thanks a lot!

5

Hello @Atsimataves

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width:767px){ .banner__text.rte p { font-size: 22px !important; } }

techlyser_web_1-1704994071929.png
techlyser_web_1-1704994071929.png1160Ă—320 460 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

6

@niraj_patel Thank you very much! :yellow_heart:

7

Welcome :blush:

8

hi there can will the positioning change for mobile to?

9

In my case, the Image Banner element is under the section-image-banner.css

This code worked for adjusting the header height and the text height, specified in vw for responsiveness

@media only screen and (min-width: 749px){
.banner__box .banner__heading {
font-size: 5vw;
}
.banner__box .banner__text {
font-size: 3.5vw;
}
}
@media only screen and (max-width: 749px){
.banner__box .banner__heading {
font-size: 7vw;
}
.banner__box .banner__text {
font-size: 5.5vw;
}
}