Reduce the font size of hero banner on mobile

Store Design
,
1

Hi, I’d like to reduce the font side of the headline of hero banner to make it into one line. Please help!

image_123650291.JPG
image_123650291.JPG1290×2796 202 KB

My website is embroidtale.com

2 Likes
2

Hi @liu_x_trujillo1

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 439px){
#shopify-section-template--23250736480574__a1a2eb2f-cb49-4435-b6db-7adbb14503c4 .h1 {
    font-size: 15px; 
}
}

And Save.

Result:

Made4uoRibe_0-1726608069410.png
Made4uoRibe_0-1726608069410.png346×421 130 KB

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

1 Like
3

Hi @liu_x_trujillo1 ,

I see you change your banner font to 22px. That is not really the best approach since you end up with a small font on desktop. Your banner need to be catchy. Please use the code below instead to make this responsive to screen size.

!. From you Admin page, go to Online Store > Themes
2. Select the theme you want to edit
3. Under the Asset folder, open the theme.css
4. Then place the code below at the very bottom of the file

#shopify-section-template--23250736480574__a1a2eb2f-cb49-4435-b6db-7adbb14503c4 .prose > .h1 {
    font-size: clamp(19px, 3vw, 40px);
}
1 Like
4

Actually use made4uo’s code, that’s a good approach.

1 Like