Jump to content
dgf12

Responsive Grid not working

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 !

Share this post


Link to post
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";
     
  }

}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...