css - 我怎样才能让这个东西响应

Question

我正在尝试使此页面在 640 像素和 1280 像素之间响应。我的前两个媒体采石场运行正常，但问题是我的第三个。我已经尝试了几种选择，但没有任何效果。这是当我达到 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??