user2213682 user2213682 - 1 year ago 65
CSS Question

Responsive Font Size

I've created a site using the Zurb Foundation 3 grid. Each page has a large h1.


body {font-size:100%}
/* Headers */
h1 { font-size:6.2em;font-weight:500; }


<div class="row">
<div class="twelve columns text-center">
</div><!-- End Tagline -->
</div><!-- End Row -->

When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accomodate for the large text.

I've noticed that on the Zurb Foundation 3 Typography example page, the headers adapt to the browser as it is compressed and expanded.

Am I missing something really obvious? How do I achieve this?

Answer Source

I'm afraid that doesn't work as you are thinking here.

The font-size won't respond like this when resizing the browser window. Instead they respond to the browser zoom/type size settings, such as if you press ctrl and + together on the keyboard while in the browser.

You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.

For example, try adding this inside your CSS at the bottom, changing the 320px width for wherever your design starts breaking:

@media only screen and (max-width: 320px) {

   body { font-size: 2em; }