In Dan Cederholm's excellent book, Handcrafted CSS, Mr. It's possible I'm coming off as too much of an Ethan Marcotte fanboy, but at this point it's essential that I provide another large tip of the hat (it should probably be a bow, maybe even a kneel) to him. So how do we convert our fixed dimensions into proportional ones? 05. We click on a text element in our image editor of choice, note the font size, and then enter the value (again, often measured in pixels) into the relevant CSS rule.

We then punch these dimensions directly into our CSS. Currently we measure (in pixels) the element sizes, margins, and so on within the graphics files from Photoshop, Fireworks, and so on. Amending a design from a fixed to a proportional layoutįor the foreseeable future, any design composite you receive or create is likely to have fixed dimensions. Putting them together forms the core of a responsive design, creating something truly greater than the sum of its parts. For many working in web design, his article was the genesis of new possibilities – new ways to create web pages that offered the best of both worlds: a way to have a fluid flexible design based on a proportional layout, whilst being able to limit how far elements could flex with media queries. Whilst the tools he used (fluid layout and images, and media queries) were not new, the application and embodiment of the ideas into a single coherent methodology was. Proportional layouts and media queriesĮthan Marcotte wrote the definitive article on Responsive Web Design at A List Apart. This will enable elements to scale relative to the viewport until one media query or another modifies the styling.

I'll cut to the chase: we need to switch our fixed, pixel-based layouts to fluid, proportional ones. Instead, we want to create a design that flexes and looks good on all viewports, not just particular ones specified in a media query. Any fixed-width design, using only media queries to adapt for different viewports, will merely 'snap' from one set of CSS media query rules to the next with no linear progression between the two. Whilst media queries are powerful, we are now aware of some limitations. Why proportional layouts are essential for responsive designs

Css fluid image grid