Last week I reviewed ‘Responsive Web Design’ by Ethan Marcotte and in theory I stand by what I thought of it but in practice things are a little different. As I rework my recent blog engine project into making it responsive I noticed a fundamental flaw in Ethan’s teachings.

Now making a pre-built site responsive is simple a case of changing all pixel based css values into percentages based upon their container. When it comes to margins and paddings for example this is what the book stated:

1. When setting flexible margins on an element, your context is the width of the element’s container.
2. When settin flexible padding on an element, your context is the width of the container itself.

Now this made perfect sense to me thinking about the box model, but on using this theory in my project I found the resulting padding was completely off target. Only when using the padding in relation to the elements container was I able to get the values I wanted – not as Ethan Marcotte explained.

On a brief search of the web, I was unable to find a direct apology from the author ( unlikely I know) but will do some research into how other developers have achieved flexibility of margins and paddings.