CSS Grid is not Responding to Media Queries

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.

     <title>CSS Grid</title>
     <link rel="stylesheet" type="text/css" href="./style.css">
     <div class="container">
         <div class="item item-c"></div>
         <div class="item item-d"></div>
.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) {
    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.

Please add your working lesson with link

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

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

That did it, thank you!

1 Like