CSS Grid is not Responding to Media Queries

HTML-CSS
1

Hello, I am learning CSS grid for the first time and it seems that my media query is not changing the structure of the grid. I even tried changing the border colors to test it but nothing changes. It’s probably something obvious I’m missing but if someone could point it out, I would appreciate it.

<!doctype>
<html>
 <head>
     <title>CSS Grid</title>
     <link rel="stylesheet" type="text/css" href="./style.css">
 </head>
 <body>
     <div class="container">
         <div class="item item-c"></div>
         <div class="item item-d"></div>
     </div>
 </body>
</html>

.container {
  display: grid;
  border: 2px solid blueviolet;
  height: 500px;
  grid-template: ". header ." "main . sidebar" ". footer ." / 19% 50% 14%;
  justify-items: stretch;
  justify-content: center;
  grid-auto-columns: 60px;
}

.item {
  border: 2px solid black;
}

.item-c {
  border: 2px solid black;
  grid-area: sidebar;
  place-self: center;
  height: 3rem;
  width: 3rem;
}
.item-d {
  grid-area: footer;
  border: 2px solid black;
}

@media (max-width: 768px) {
  .container{
    grid-template-areas: ". header ." ". . ." ". footer .";
  }
 .item {
   border: 5px dashed yellow;
 }
}

From what I understand, since .item-c's grid area “sidebar” won’t exist in the new grid-template within the media query, then it should be placed in the top left of the grid. But nothing changes.

2

Please add your working lesson with link

3

Hi,
I can see media query change the border style and move the divs on smaller screen.

You might need in your <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
to see this work as you go to small screen.

Good luck

4

I’m just practicing on my own using CSS-Tricks as a guide.

5

That did it, thank you!

1 Like