Bei responsive Webdesign stell es sich immer wieder als schwierig heraus die richtige @media-Query für die aktuelle Bildschirmgröße zu verwenden. Zwar kann man sich grob an ein Muster halten, jedoch gibt es so viele unterschiedliche Smartphone Displays das es ein Ratespiel wird die richtige Query zu treffen.

Mit einem kleinen JavaScript lässt sich das Problem umgehen. Während der Entwicklung / Testphase bindet man ein kleines Skript ein, welches die aktuelle Bildschirmauflösung immer in der oberen Ecke anzeigt.

Somit kann man direkt die entsprechende @media-Query wählen und muss nicht probieren und testen bis es passt.

Sehr zu empfehlen:

https://github.com/oldprojects/Window-Size-Bookmarklet