Flexible CSS for mobile browsers
A CSS Grid that fits to mobile and tablet devices without a second CSS type.
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.
By mobile, we really mean smart phones. But it works on devices that recognise 'handheld' in the style sheet media and/or media queries. With media queries you can even include x2 images for the iPhone 4 Retina Display.
Browser support
It works perfectly in Chrome, Safari, Firefox, IE7 & IE8.
It works alright in IE6. IE6 doesn't support max-width, so the grid doesn't fix to 1140px. It spans the full width of the browser. Most people using IE6 probably don't have monitors with a resolution higher than 1280x1024 though. Images are also not restrained to the width of the column because of max-width. But the extra image is hidden, rather than breaking the layout.
This shows the site resized for mobile size
Normal Size
