How to get site title and site description text to scale down with page (4 posts)

  1. NF Graphic Design
    Posted 2 years ago #

    The site is http://www.activeshiftmassage.com

    I am modifying the header and I set up the theme as a child theme of twentyeleven.

    Everything is pretty much working as I want, but I would like the site title and description text to ideally remain as a line of text for each and the font size get smaller as the screen size is smaller.

    I set it up fine for iphones, but when it scales down on my ipad it still it makes both the title and description 2 lines each instead of remaining on one line each and making the font size smaller.

    any help would be appreciated.


  2. ClaytonJames
    Posted 2 years ago #


    See the section labeled: Set Font Size With Em

    While I believe that the twentyeleven theme already uses "em" by default in the title and tag line declarations, perhaps just a little tweaking might be required.

  3. Another idea might be to add a new media query for that breakpoint.
    You can add as many of these as you want. So for example in your child theme style.css, you could have something like:

    @media screen and (max-width: 962px) {
    	  styles for this size...
    @media screen and (max-width: 780px) {
             styles for this size...
    @media screen and (max-width: 675px) {
              styles for this size....

  4. NF Graphic Design
    Posted 2 years ago #


    I do have the fonts set in em,

    Also I did the @media settings for the smaller iphone screen, but I thought that the fonts should still be able to scale down and it would not be necessary for the ipad resolution as it already does a good job of scaling the rest down, it is just the text in the title and description

Topic Closed

This topic has been closed to new replies.

About this Topic