Reply To: Typography not condensing enough for Iphone

[Atelierbram]

There is a class of clearfix set on the gridContainer, but not declared in the CSS, and white-space: nowrap; set on #header (and inherited by all the headers) is not within a media-query. Because of the large font-size and the headings not wrapping, this causes the overflow on small screen sizes.

So when the white-space: nowrap; kicks in on a wider screen: is within a media-query, this issue will be solved:

@media only screen and (min-width: 480px) {
  #header h1,
  #header h2 {
   white-space: nowrap; 
   }
 }

http://codepen.io/atelierbram/pen/qNdQaw

And yes as Beverleyh suggested, better use the line-height and padding properties in CSS ISO height on text.