Ben Packard Ben Packard - 11 months ago 130
CSS Question

CSS font size for mobile

I have simple pages completed that seem to respond well to different size screens. I haven't done anything fancy to achieve this - just avoided fixed sizes etc.

One page, however, has a large single word in a large font:

enter image description here

When I resize the browser, all other content lays out correctly, but the title word of course won't break:

enter image description here

What is the correct way to handle this? Is there some way to adjust the font size based on the screen width?

Answer Source

You can use media queries like:

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
   body {
    background: #ccc;
  }
}

Some more info can be found here: http://css-tricks.com/css-media-queries/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download