Media Queries für Tablet nicht funzioniert

[liebewinter]

hallo , versuche mit einem Online-virtualization sehe wie meine Website aussiehst .

Wie meine Website aussiehst mit diesen Tablet Online-virtualization…

In Css habe dieser Code gegeben um meine Website in Tablet zu sehen..

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


@media screen and (min-width: 30em) {
#externalLinks  a  {
    text-decoration: none;
	display: block;
	text-align: center;

    font-size: 15px;
	font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
 }

li a, .dropbtn {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;

 }

}
 

@media (min-width: 48em) and (max-width: 64em) {
  
 #externalLinks  a  {
    text-decoration: none;
	display: block;
	text-align: center;
    font-size: 15px;
	font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
  }
li a, .dropbtn {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;

 }

}
 


@media (min-width: 48em) and (max-width: 64em) and (orientation: landscape) {
  
 #externalLinks  a  {
    text-decoration: none;
	display: block;
	text-align: center;
    font-size: 15px;
	font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
  }
li a, .dropbtn {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;

 }

}
 

aber dieser Code , hat keine Wirkung ...

Kann Bitte jemand hilfe um dieses probleme zu losen , Danke !