我无法使用最大宽度媒体查询来设置页面样式

Question

我正在练习编码。尝试制作 grubhub 网页。最大宽度媒体查询有问题。

下面是我的代码

  @media (max-width: 800px) {
    div.displayFood h2 {
      font-size: 3rem;
    }
    .order {
      display: flex;
      flex-direction: column-reverse;
    }
  }

我明白了，代码很多。感谢任何帮助。

Answer 1

设备宽度小于 800 像素的媒体查询将是@media only screen and (max-width: 800px) {...}

Answer 2

您在 class .hide

上缺少右括号

这就是为什么在此之后没有任何效果的原因class

.hide {
  display: none;
} /*<---- this is missing*/
  
@media (min-width: 800px) {
  .hero {
    flex-wrap: nowrap;
  }
}