как я могу сделать эту вещь отзывчивой

Question

я пытаюсь сделать эту страницу отзывчивой между 640px и 1280px. мои первые два медиа-карьера работают нормально, но проблема в моем третьем. Я уже пробовал несколько вариантов, но ничего не получается. Вот проблема, когда я достигаю 829px, верхний и нижний колонтитулы работают независимо от ширины экрана, но часть сечения не работает, несмотря ни на что.

  @media (max-width: 1260px) {  
     #container {  
     display: grid;
     grid-template-areas: 
       "header header header"
       "nav section section"
       "nav aside aside"
       "footer footer footer";
      grid-template-rows: repeat(4, 1fr);
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 5px;
      height: 100vh;
      margin: 10px;   
   }
    ul li {
    display: block-inline; 
   }
  }
  @media (max-width: 1223px) {
  #container {
  display: grid;
  grid-template-areas: 
  "header header header"
  "nav nav nav"
  "section section section"
  "aside aside aside"
  "footer footer footer";
   grid-template-rows: 1fr;
   grid-template-columns: 13% 1fr 18%;
   grid-gap: 5px;
   height: 100vh;
   margin: 10px;  
  }
 ul li {
  text-align: center; 
  }
 }

  @media (max-width: 829px) {
  #container #products {
   display: grid; 
  grid-template-areas:
   "header"
  "nav"
  "section"
  "section"
  "aside"
  "footer";

   }
 }

Answer 1

Я вижу, у вас есть другой элемент на третьем @media, позвольте мне показать вам:

@media (max-width: 1223px) {
  #container { ... }
 }

 @media (max-width: 829px) {
  #container #products { ... } // Do you want to change #container or #products??