Menu icon Foundation
Responsive Font Size

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

CSS

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

         

HTML

<div class="row">
    <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
    </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 (http://foundation.zurb.com/old-docs/f3/typography.php), the headers adapt to the browser as it is compressed and expanded.

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

Thanks

Responsivefont-size

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

CSS

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

         

HTML

<div class="row">
    <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
    </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 (http://foundation.zurb.com/old-docs/f3/typography.php), the headers adapt to the browser as it is compressed and expanded.

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

Thanks

This post has been closed. No new replies can be added.

Jeff Simpson over 5 years ago

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

The font-size won't respond like this with the resizing of the browser window. Instead they respond to the browser zoom/type size settings, such as if you press ctrl and + together on the keyboard 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 inside your CSS try adding this at the bottom changing the 320px width for wherever your design starts breaking:

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

   body { font-size: 2em; }

}