[P3N]

Borde du inte lägga reglerna så att om webbläsaren är mindre än vad layouten kräver så skall den byta till en mindre?
Som det är nu så byter regeln till den mindre layouten bara när ytan är liten nog för att den layouten precis skall passa. När den egentligen behöver byta till en mindre layout när det inte finns plats längre. Designen nu släpar efter så att säga och blir då för stor.
Vad gäller mobilen, prova att byta ut "@media (max-width: 320px)" till "@media screen and (max-width: 320px)". (Källa: http://stackoverflow.com/questions/8...-media-queries).

[P3N]

Ett tips till. För att få layouten att flyta på i mellan de olika upplösningarna använd både width och max-width (procent värde på max-width). Så flyter layouten på i mellan de olika upplösningarna/reglerna också. (Källa: http://webdesignerwall.com/tutorials...ponsive-design) (detta lär ju lösa problemet med eftersläpningen ovan )

[P3N]

Två tips till till mobilen (kommer på efterhand här ):

<meta name='viewport' content='user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0'/>

Det gör så att sidan inte visas i full size utan efter skärmens storlek.

Samt att om du sätter overflow: hidden; på wrappern så slipper man att sidan kan röra sig i sidled (testat på iPhone bara).