侧边栏不会移动到 "main" 的左侧并且 CSS 网格在 "landscape tablet" 上没有按预期工作

Question

我遇到了几个小时以来一直让我抓狂的问题。我正在构建的主页使用 CSS 网格布局，在“纵向平板电脑”之前一切正常，但现在我想调整“横向平板电脑”中的侧边栏和网格布局，一切都变得一团糟，侧边栏不会显示自己。甚至网格也乱七八糟，不符合我为其列指定的尺寸。

整个项目（它只是主页）及其代码在我的 GitHub page and the website itself is here.

如果有人帮助我解决这个让我发疯的问题，我将非常感激。

提前致谢！

Answer 1

嗨,

您为 768px => portrait 添加了样式而忘记了 768px => landscape

所以需要 320px => landscape 种样式

正文中指定的问题grid-template-areas

采用这种风格

grid-template-areas:
  "header"
  "main";

所以侧边栏不显示

在主样式的底部添加即可上次编辑

/* Bottom Banner for Tablet Landscape Screens */
@media only screen and (min-width: 768px) and (orientation: landscape) {
  body {
    grid-template-areas:
      "header header"
      "sidebar main";
  }
}

我在 github 上将 Pull Request 中的编辑发送给您查看

侧边栏不会移动到 "main" 的左侧并且 CSS 网格在 "landscape tablet" 上没有按预期工作

Sidebar doesn't move to the left side of "main" and CSS Grid isn't working as expected on "landscape tablet"

html

css

css-grid