Reply To: Typography not condensing enough for Iphone

[Beverleyh]

As Atelierbram already noted, there is white-space:nowrap; declared against the #header element, which is in turn
being inherited by the fancy h1 and h2 titles that are sat inside of it. This particular declaration is towards the top of the fluid.css file, so if you take that line out, your titles will at least wrap on small screens. Note that there are additional height declarations that will make the titles wrap awkwardly, but you can tackle them along with their font-size…

Font-size next – that is declared internally in the head of the web page (along with those hinky title heights). Firstly, try moving all those internal CSS declarations into the fluid.css file – at bottom of the ‘Mobile Layout’ block, but above the ‘Tablet Layout’ block. Then maybe make the h1 and h2 titles a tad smaller by reducing the font-size values (46px/36px). Also remove the height declarations and switch to line-height instead. You’re working ‘mobile first’ so if you get the titles set up for small screens first in the fluid.css stylesheet, you can redeclare the h1 and h2 font-size later on in the ‘Tablet Layout’ block to make them bigger again for larger screens.

Now, I don’t use Dreamweaver myself so I’m unsure how it breaks down the stylesheets, or what it gives you as a default layout, but you should be able to merge the CSS into one file. As Aterlierbram already stated, cutting down on HTTP requests (i.e. Any links to stylesheets, images, JavaScript files, etc) will help with load times, and squishing multiple CSS files into a single stylesheet is one of the easier ways to achieve this.

Hope that helps