Mobile Page Headers

Support Area Forums United Mobile Page Headers

This topic contains 3 replies, has 2 voices, and was last updated by  Bill Robbins 2 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
URL to the page in question: http://
  • Author
    Posts
  • #31515

    Shannon Blosser
    Participant

    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!

    #31516

    Bill Robbins
    Keymaster

    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

    #31517

    Shannon Blosser
    Participant

    That’s perfect! Thank you!

    #31518

    Bill Robbins
    Keymaster

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

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Mobile Page Headers’ is closed to new replies.