Headline Font Size on mobile

Highlighted
Tourist
26 0 1

Hi everyone,

How to change the headline font size on mobile ?

Mine appears very small compare to the subtitle headline.

 

Thanks, Fab
0 Likes
Highlighted
Shopify Staff
Shopify Staff
283 0 50

Hi Fab,

If you mean to change the size of "THE WORLD'S MOST CUSHIONED SNEAKERS" on the mobile view, this is how you can do that:

  • Visit your Online Store > Themes in Admin
  • Click the [...] button for your theme, and choose Edit HTML/CSS
  • Search for the styles.scss.liquid file, under Assets
  • Add this code, to the very bottom:
  • @media only screen and (max-width: 767px){
      .headline {
        font-size:1.2em;
      }
    }

    Change 1.2em to 1.3em, and see how it looks. If you need it larger, increase the number by 0.1em again. I hope that helps!

Please let me know if you had any other questions about this!

Hugh

 

Happy selling! :)
1 Like
Highlighted
Tourist
26 0 1

Thank you Hugh :-)

Thanks, Fab
0 Likes
Highlighted
New Member
1 0 0

I couldn't get this to work unfortunately for my banner headings

 

I added 

@media only screen and (max-width: 767px){
.banner-section .content .title {
font-size:30px!important;
}
}

to theme.scss.liquid

as suggested in other posts. but the font size for mobile stays always small. 

 

mobile banner heading.png

0 Likes