Keith J. Grant - Stop Thinking in Pixels

It reads better in terms of media queries especially if you're using a preprocessor (most are capable of nesting) because it's easier mentally to think about and design for. People are doing tricks with `calc` now (Nice clip explaining @22mins) but you still need to do touch ups with media queries. Example of mobile first : .test-class { // Smallest mobile device (default everything under 640px) background-color: red; @media only screen and (min-width: 640px) { background-color: orange; } @media only screen and (min-width: 1200px) { background-color: yellow; } @media only screen and (min-width:…

Essentially you want to watch this: link to this video And/or if you're really into math, this on fluid typography (i.e. how to apply linear interpolation to fonts and layout): link to this video As for how to structure things. I'm reading you're having problems with using em's. That's because em's inherit values. Meaning if you set em's on an element (`.parent`) and then set it again on a nested element (`.child`), the em value is like a percentage of the parent value. What you need to do is use Rem's. Typically i use Rem's for the "parent-level" component wrapping elements, then i use em's for the child elements.