Media Queries für Tablet nicht funzioniert

[liebewinter]

so , etwas habe gelern warum Media Query nicht funzioniert…

ich habe einiger Fehler gemacht …

• nach @media , muss etwas kommt ,screen , print oder … (ich habe in einiger Beispiel nicht geschrieben...)

• Man muss sehe ob Probleme auf portrait oder landscape hat … (um lösugen zu finde man muss wiessen der PX vom Gerät...)

.... und noch anderen…

Jetzt habe mit diesem Code für einen Google Nexus 7 966x603 versucht..

@media screen and (min-width: 30.06em) and (max-width: 38.6875em) {

    body {
     
      display: grid;
      grid-template-columns: 17% 72% 9%;
      grid-gap: 5px;
      grid-template-areas:
       "header  header  header"
       "nav     nav     nav"
       "linkBox main    infoBox"
       "footer  footer  footer";
    }
}  

meine Breite (landscape) kommt gut , wie der Screenshot zeigt..

aber das Probleme habe mit dem portrait…

wie der Screenshot zeigt , nach Unten den footer , gibt es Platz , aber ich weiss nicht wie er gekommt hat ... und was kann ich mache um das ganze Bildschirm von meine Website gezeigt wird...