Problem with Media Query on orientation: Landscape

Hallo , sorry about my English…

I build my layout with Grid .

I search to build a Responsive Web Design for Google Nexus Tablet .Mit this code;

/* Tablet Nexus 7 (Landscape) */

@media only screen and (width: 37.6875em) and (orientation: landscape) {
 
  body {
    height: 100%; 
    display: grid;
    grid-template-columns: 12% 75% 13%;
    grid-template-rows: auto auto 70vh auto;
    grid-gap: 5px;
    grid-template-areas:
      "header  header  header"
      "nav     nav     nav"
      "linkBox main    infoBox"
      "footer  footer  footer";
    
      
    }
    body > main {
     height: 70vh;
    }
}





/* Tablet Nexus 7 (Portrait) */

@media screen and (min-width: 30.06em) 
              and (max-width: 38.6875em) 
              and (orientation: portrait){
    body {
     
      display: grid;
      grid-template-columns: 17% 70% 13%;
      grid-template-rows: auto auto 70vh auto;
      grid-gap: 5px;
      grid-template-areas:
       "header  header  header"
       "nav     nav     nav"
       "linkBox main    main"
       "footer  footer  footer";
    }
    body > main {
     height: 70vh;
   }

    #name {font-size: 0.55em;}
    #email {font-size: 0.55em;}
    #text {font-size: 0.8em;}
    #comment {font-size: 0.5em;}
    #externalLinks a{text-align: left;}
    #externalLinks ul {margin: 2px;}
}

but with orientation: landscape i to receive this Screenshot…

How too see , below from footer have empty place , what can to do and this Problem to solve ??

Can please anyone help me , Thanks !

I don’t see HTML, but set body height to 100vh and add grid-area: main to body > main

Thanks for your answer ! , i don’t understand

add grid-area: main to body > main
body > main {
  grid-area: main; // add this
  ...
}

now i have this Code;

@media screen and (min-width: 37.5em) and (max-width: 62.375em) {
 
  body {
   
    display: grid;
    
    grid-template-columns: 12% 75% 13%;
    grid-template-rows: auto auto 100vh auto;
    grid-gap: 5px;
    grid-template-areas:
      "header  header  header"
      "nav     nav     nav"
      "linkBox main    infoBox"
      "footer  footer  footer";
    
      
    }
    body > main {
     grid-area: main;
    }
}

but nothing to change …

Here how have all css Code for Desktop , Tablet and smartphone…

@media (min-width: 20em) and (max-width: 30em) {
  
   body {
     
          display: grid;
          grid-template-columns: 13% 77% 10%;
          grid-template-rows: auto auto 70vh auto;
          grid-gap: 5px;
          grid-template-areas:
           "header  header  header"
           "nav     nav     nav"
           "linkBox main    main"
           "footer  footer  footer";
    }
     body > main {
     height: 70vh;
     
   }
      /* HOVER  */
  
   .dropdown:hover, .dropdown:focus, .dropdown:active, .dropdown-content {
     display: block; 
   
     top: 20em;
   }
} 


/* Tablet Nexus 7 (Portrait) */

@media screen and (min-width: 30.06em) 
              and (max-width: 38.6875em) 
              and (orientation: portrait){
    body {
     
      display: grid;
      grid-template-columns: 17% 70% 13%;
      grid-template-rows: auto auto 70vh auto;
      grid-gap: 5px;
      grid-template-areas:
       "header  header  header"
       "nav     nav     nav"
       "linkBox main    main"
       "footer  footer  footer";
    }
    body > main {
     height: 70vh;
   }

    #name {font-size: 0.55em;}
    #email {font-size: 0.55em;}
    #text {font-size: 0.8em;}
    #comment {font-size: 0.5em;}
    #externalLinks a{text-align: left;}
    #externalLinks ul {margin: 2px;}
}

/* Tablet Nexus 7 (Landscape) */


@media screen and (min-width: 37.5em) and (max-width: 62.375em) {
 
  body {
   
    display: grid;
    
    grid-template-columns: 12% 75% 13%;
    grid-template-rows: auto auto 100vh auto;
    grid-gap: 5px;
    grid-template-areas:
      "header  header  header"
      "nav     nav     nav"
      "linkBox main    infoBox"
      "footer  footer  footer";
    
      
    }
    body > main {
     grid-area: main;
    }
}

/* Tablet iPad 4 generation & iPad air, Landscape */

@media screen and (min-width: 48em) 
              and (max-width: 64em) 
              and (orientation: landscape){
    body {
     
      display: grid;
      grid-template-columns: 10% 77% 13%;
      grid-template-rows: auto auto 70vh auto;
      grid-gap: 5px;
      grid-template-areas:
       "header  header  header"
       "nav     nav     nav"
       "linkBox main    infoBox"
       "footer  footer  footer";
    }
    body > main {
     height: 70vh;
    }
}

/* Tablet iPad 4 generation & iPad air, Portrait */

@media screen and (min-width: 48em) and (max-width: 64em)  {
  
 
 body {
    display: grid;
    grid-template-columns: 14% 73% 13%;
    grid-template-rows: auto auto 70vh auto;
    grid-gap: 5px;
    grid-template-areas:
      "header  header  header"
      "nav     nav     nav"
      "linkBox main    infoBox"
      "footer  footer  footer";
    }
   body > main {
     height: 70vh;
    }
    #name {font-size: 0.55em;}
    #email {font-size: 0.55em;}
    #text {font-size: 0.8em;}
    #comment {font-size: 0.5em;}
    #externalLinks a{text-align: left;}
    #externalLinks ul {margin: 2px;}
                  
}

/*   My Desktop  */

@media (min-width: 64.0625em) and (max-width: 80.06em) {

   body{
      background-color: #ebf5d7;
      grid-gap: 5px;
      grid-template-columns: 9% 73% 18%;
      grid-template-areas:

       "header   header   header"
       "nav      nav      nav"
       "linkBox  main  infoBox"
       "footer   footer   footer" ;
    }    
}

@media screen and (min-width: 80.0625em) {
  
    body {
     
      display: grid;
      grid-template-columns: 10% 72% 18%;
      grid-gap: 5px;
      grid-template-areas:
       "header  header  header"
       "nav     nav     nav"
       "linkBox main    infoBox"
       "footer  footer  footer";
    }
}

It was for the landscape orientation media query.

now a writing this…

@media screen and (min-width: 37.5em) and (max-width: 62.375em) and (orientation: landscape) {
 
  body {
   
    display: grid;
    
    grid-template-columns: 12% 75% 13%;
    grid-template-rows: auto auto 100vh auto;
    grid-gap: 5px;
    grid-template-areas:
      "header  header  header"
      "nav     nav     nav"
      "linkBox main    infoBox"
      "footer  footer  footer";
    
      
    }
    body > main {
     grid-area: main;
    }
}

what not to change…

Why are you creating million media queries if all of them are basically the same?

Also you better post your code on codepen.io or jsfiddle.net, because right now you’re posting every time something different.

My code on codepen.io

My Code for desktop , Tablet ,…

@media (min-width: 20em) and (max-width: 30em) {
  
   body {
     
          display: grid;
          grid-template-columns: 13% 77% 10%;
          grid-template-rows: auto auto 70vh auto;
          grid-gap: 5px;
          grid-template-areas:
           "header  header  header"
           "nav     nav     nav"
           "linkBox main    main"
           "footer  footer  footer";
    }
     body > main {
     height: 70vh;
     
   }
      /* HOVER  */
  
   .dropdown:hover, .dropdown:focus, .dropdown:active, .dropdown-content {
     display: block; 
   
     top: 20em;
   }
} 


/* Tablet Nexus 7 (Portrait) */

@media screen and (min-width: 30.06em) 
              and (max-width: 38.6875em) 
              and (orientation: portrait){
    body {
     
      display: grid;
      grid-template-columns: 17% 70% 13%;
      grid-template-rows: auto auto 70vh auto;
      grid-gap: 5px;
      grid-template-areas:
       "header  header  header"
       "nav     nav     nav"
       "linkBox main    main"
       "footer  footer  footer";
    }
    body > main {
     height: 70vh;
   }

    #name {font-size: 0.55em;}
    #email {font-size: 0.55em;}
    #text {font-size: 0.8em;}
    #comment {font-size: 0.5em;}
    #externalLinks a{text-align: left;}
    #externalLinks ul {margin: 2px;}
}

/* Tablet Nexus 7 (Landscape) */


@media screen and (min-width: 37.5em) and (max-width: 62.375em) and (orientation: landscape) {
 
  body {
   
    display: grid;
    
    grid-template-columns: 12% 75% 13%;
    grid-template-rows: auto auto 100vh auto;
    grid-gap: 5px;
    grid-template-areas:
      "header  header  header"
      "nav     nav     nav"
      "linkBox main    infoBox"
      "footer  footer  footer";
    
      
    }
    body > main {
     grid-area: main;
    }
}

/* Tablet iPad 4 generation & iPad air, Landscape */

@media screen and (min-width: 48em) 
              and (max-width: 64em) 
              and (orientation: landscape){
    body {
     
      display: grid;
      grid-template-columns: 10% 77% 13%;
      grid-template-rows: auto auto 70vh auto;
      grid-gap: 5px;
      grid-template-areas:
       "header  header  header"
       "nav     nav     nav"
       "linkBox main    infoBox"
       "footer  footer  footer";
    }
    body > main {
     height: 70vh;
    }
}

/* Tablet iPad 4 generation & iPad air, Portrait */

@media screen and (min-width: 48em) and (max-width: 64em)  {
  
 
 body {
    display: grid;
    grid-template-columns: 14% 73% 13%;
    grid-template-rows: auto auto 70vh auto;
    grid-gap: 5px;
    grid-template-areas:
      "header  header  header"
      "nav     nav     nav"
      "linkBox main    infoBox"
      "footer  footer  footer";
    }
   body > main {
     height: 70vh;
    }
    #name {font-size: 0.55em;}
    #email {font-size: 0.55em;}
    #text {font-size: 0.8em;}
    #comment {font-size: 0.5em;}
    #externalLinks a{text-align: left;}
    #externalLinks ul {margin: 2px;}
                  
}

/*   My Desktop  */

@media (min-width: 64.0625em) and (max-width: 80.06em) {

   body{
      background-color: #ebf5d7;
      grid-gap: 5px;
      grid-template-columns: 9% 73% 18%;
      grid-template-areas:

       "header   header   header"
       "nav      nav      nav"
       "linkBox  main  infoBox"
       "footer   footer   footer" ;
    }    
}

@media screen and (min-width: 80.0625em) {
  
    body {
     
      display: grid;
      grid-template-columns: 10% 72% 18%;
      grid-gap: 5px;
      grid-template-areas:
       "header  header  header"
       "nav     nav     nav"
       "linkBox main    infoBox"
       "footer  footer  footer";
    }
}

Why are you creating million media queries if all of them are basically the same?

i try as here tell…

I checked your codepen and it works fine, but it doesn’t have any media queries.

I checked your codepen and it works fine

yes , but in Desktop and iPad air , not on Nexus…

I to want it with a Virtual machine , here

fine, but it doesn’t have any media queries.

because have all media queries on another File… , the Code is above from your last writing…

I found that problem ! :smiley:

because i to use in my media landscape grid-template-rows: auto auto 70vh auto; and too…

body > main {
     height: 70vh;
 }

The Code for Nexus i have lost , because Apple 4 generation (iPad, Tablets) and Nexus have like greater (Nexus is only a little small as iPad) .Only have now the Code for Nexus for Portrait .
How have now my Code for iPad Tablets and Nexus on Landscape .

@media screen and (min-width: 48em) 
              and (max-width: 64em) 
              and (orientation: landscape){
    body {
     
      display: grid;
      grid-template-columns: 11% 76% 13%;
      grid-gap: 5px;
      grid-template-areas:
       "header  header  header"
       "nav     nav     nav"
       "linkBox main    infoBox"
       "footer  footer  footer";
    }
   
}

what i don’t understand , what does grid-template-rows: auto auto 70vh auto; on Portrait …

@ jenovs , very thanks for your help !