Responsive Grid not working

[dgf12]

Can please anyone help me ?

This is my Media Queries for Tablets ;

@media (min-width: 37em)    {
 body {
    display: grid;
    grid-template-columns: 10% 72% 17%;
      grid-template-areas:
    "header  header  header"
    "nav     nav     nav"
    "linkBox main    main"
    "footer  footer  footer";
     
  }

and this my Media Queries for Desktops;

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

My Computer has a Resolution from 1280 x 1024 .
When change on @media (min-width: 37em) , on the Line
"linkBox main infoBox" to “linkBox main main" , too to change the column from my Desktop...🙁

Why change it when i will only to change on Tablets ?

Can please anyone help me , Thank !

[dgf12]

I found the solution from my Problem ! 🙂

My mistake was that me to be missing screen on my Media Queries …

Now with @media screen and (max-width: 37em) , prevent working the Queries from my Desktop …

Before wrote;

@media (min-width: 37em)    {
 body {
    display: grid;
    grid-template-columns: 10% 72% 17%;
      grid-template-areas:
    "header  header  header"
    "nav     nav     nav"
    "linkBox main    main"
    "footer  footer  footer";
     }
}

and now how to see my Media Queries …

@media screen and (max-width: 37em)   {
 body {
    display: grid;
    grid-template-columns: 10% 72% 17%;
      grid-template-areas:
    "header  header  header"
    "nav     nav     nav"
    "linkBox main    main"
    "footer  footer  footer";
     
  }

}

 

[dsonesuk]

You haven't change anything? same number of columns, same proportional size, its is the same except different grid name, that won't change what it was originally scalling it down from desktop to mobile.