Menu icon Foundation
Header and paragraph scaling issues

The size of the header text and paragraph text doesn't scale in accordance with the size of the viewport, even when assigned different class values (large-16 vs small-8). This issue causes text in small screen situations to remain too large and overflow, breaking the design. When coded for small screens specifically, the way the text renders on large screens is too small, creating an undesirable amount of whitespace.

I'm using responsive font-size values in the form of em and %, but this doesn't seem to have a different effect than strictly using px or pt values because the font-size doesn't change as the viewport does. I'm also using a the "essentials" package of Foundation, so that could be a factor - I'm not sure though (new user).

Is this normal? Is there a solution for it? Or is this the type of situation where media queries should be used? Thanks in advance for any advice!

font sizetext sizescalingheaderparagraph

The size of the header text and paragraph text doesn't scale in accordance with the size of the viewport, even when assigned different class values (large-16 vs small-8). This issue causes text in small screen situations to remain too large and overflow, breaking the design. When coded for small screens specifically, the way the text renders on large screens is too small, creating an undesirable amount of whitespace.

I'm using responsive font-size values in the form of em and %, but this doesn't seem to have a different effect than strictly using px or pt values because the font-size doesn't change as the viewport does. I'm also using a the "essentials" package of Foundation, so that could be a factor - I'm not sure though (new user).

Is this normal? Is there a solution for it? Or is this the type of situation where media queries should be used? Thanks in advance for any advice!

Alexander Assimidis over 4 years ago

You should use Media Queries for example change the font-size or use word-break.

    word-wrap: break-word;