How to get site title and site description text to scale down with page

  • The site is https://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.

    thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

  • https://www.w3schools.com/css/css_font.asp

    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.

    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....
}

    etc…

    Thread Starter NF Graphic Design

    (@nf-graphic-design)

    Thanks,

    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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to get site title and site description text to scale down with page’ is closed to new replies.