Reduce the font size of hero banner on mobile

[liu_x_trujillo1]

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

My website is embroidtale.com

[Made4uo-Ribe · Accepted solution]

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:

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

[made4Uo]

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

[Made4uo-Ribe]

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