Shrink text size automatically

  • daver0611

    (@daver0611)


    11 years, 8 months ago

    I’m fairly new to everything but have been reading a fair bit and putting a few tweaks in that I’ve found here and there.

    At the moment the menu bar of my website is fine on a larger display; however when it’s viewed on a smaller screen the page titles in the menu bar go onto a second line.

    Is there any way of getting the text size to automatically reduce to fit on one line?

    Website is http://www.brassfunkeys.com and I’m using an adapted twenty ten theme.

    Thanks very much

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

    (@channeleaton)

    11 years, 8 months ago

    You will need to use media queries in your CSS. Something like this:

    @media screen and (max-width: 400px) {
    #access a {
      font-size: 50%;
    }
}

    Adjust the max-width (break point) to fit your needs. Read this awesome writeup on responsive web design.

    Thread Starter daver0611

    (@daver0611)

    11 years, 8 months ago

    Thanks very much. Might nick a couple of things from that article as well.

    Where in the stylesheet should this go?

    channeleaton

    (@channeleaton)

    11 years, 8 months ago

    There are two schools of thought on this, top and bottom. Since you already have the CSS written, it would be easier just to tack it at the bottom of style.css.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Shrink text size automatically’ is closed to new replies.

Tags