Jump to content

Responsive Grid not working


dgf12
 Share

Recommended Posts

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 !

Link to comment
Share on other sites

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";
     
  }

}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...