adjusting text size as screen gets smaller or larger

[webfriend]

Is it possible to have text get smaller or larger as the window or screen gets smaller or larger?

In my CSS I’ve tried setting the font size as % or ems but the results haven’t been very good. The font size begins to shrink then suddenly gets larger again. My graphics & pics adjust nicely, but not the fonts for the text below the picture. You can see my latest attempt here:
http://loriphotos.com/confidential/LoriYogaWeb/index1140_wide.html

Thanks!

[hero]

Have you looked into media queries. That should do the trick for you. Its a CSS approach to adjust elements based on your screen resolution. The alternative is a jquery snippet.

http://www.alistapart.com/articles/responsive-web-design/

[hero]

Here is for mobile. There is also a way to check for the screen orientation to adjust the page for iPads in horizontal view.

@media screen and (max-device-width: 480px) {
h3 { font-size: 1.2em;
}

[webfriend]

Thanks for the links, I really appreciate the information. I’ve found the weak points in my code and made a noticeable improvement. There’s always more to learn.

[Author]

Posts