移动应用于桌面的媒体查询

Question

我不确定为什么我的媒体查询适用于大于指定尺寸的尺寸。例如，类似portrait的图像在我的笔记本电脑上显示为250px而不是预期的400px。

我的媒体查询结构如下，位于我的CSS末尾。

@media screen and (max-width: 767px) {
.portrait {
    height: 250px;
  }
}

完整代码：Codeply

Answer 1

您在媒体查询中的.about-text样式中有一个额外的右括号。

.about-text {
  font-size: 15px;
  padding: 1.4em;
  /* Removes margin added in main CSS */
  margin-bottom: 0;
  } <--
}

只需删除它即可按预期工作。