Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Changing size of one banner heading for mobile only

Go to solution Solved by christyprice,


So I am building a website using the Impact template in the Brine family. I kept much of the original formatting, as it worked well for my client, including the large block header 1 format. However, one of my banner page titles has a word ("recreational") that is too long for the mobile view and getting cut off or wrapped mid-word (I included a screenshot). How do I change the font-size only on this page, and only for the mobile view? I don't want the font-size to change on the full-screen size; and I want the other mobile-view page title font-sizes to remain the same.

Site: Recreational Therapy page



Link to post
  • Answers 26
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

You'd want to target that specific block for mobile only  in Design > Custom CSS. Try this and play around with the font size. @media screen and (max-width: 640px) { #block-b804c57f124fbfbe2d7f

Hi @djm, yes you can target all h3 on mobile.  @media only screen and (max-width: 991px) { h3 { font-size: 12px !important; } } You can change around the screen size max-width and the font

thank you so much! I didn't realize you could target blocks. Super helpful.

Posted Images

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...