Mobile Page Headers

[Shannon Blosser]

Hi Bill!
I am wondering if it’s possible to make the page headers (h1) smaller on mobile devices. Currently they cut words in weird spots when wrapping and just kind of look awkward in comparison to the rest of the text.
Thanks!

[Bill Robbins]

Hello Shannon,

You can change the size of your headings on smaller screen sizes. Here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-width: 767px) {
   
   	h1 {
   	  font-size: 30px;
   	}
   
   }
   

3. Update your settings.

That will reduce the font size of the h1 tag from 45px to 30px when the browser is narrower than 768 pixels wide (the width of an iPad in portrait mode). Test that and see how it feels to you. You can make them larger or smaller by changing the 30px in the snippet above.

You can also add in other heading tags (h2, h3, h4 and so on) before the closing } in that snippet to change them as well. It could look like this:

@media only screen and (max-width: 767px) {

	h1 {
	  font-size: 30px;
	}
	
	h2 {
	  font-size: 26px;
	}
	
	h3 {
		font-size: 22px;
	}
	
	h4 {
		font-size: 18px;
	}

}

If you have any questions or trouble, let me know.

Have a great week,
Bill

[Shannon Blosser]

That’s perfect! Thank you!

[Bill Robbins]

Fantastic! If you need anything else, just let me know 🙂

[Author]

Posts