Blogger 博客存档显示在移动屏幕的一半页面上

Question

像 https://www.neuroscientia.com/2018/08/ 这样的 Blogger 博客存档搜索结果只在页面的一半显示帖子，而另一半留空，尤其是在移动屏幕尺寸上。我已经调整了我的 HTML 源代码，但无法找到导致此问题的原因。

我正在使用响应式模板，已经设置了媒体屏幕和视点。所以我很困惑为什么会出现这个错误。

我试过的类似帖子：

博客托管在 Blogger 上。拜托，我需要你的帮助才能在所有设备上全屏显示 Blog Archive 搜索结果列表。

Answer 1

在代码中有这个命令：

@media only screen and (max-width: 755px)
   .sidebar-wrapper1 {
      display: none;
}

关闭它，右侧栏不会消失！

或者，如果您的意思是要将剩余的列设为 100% 宽度，

    .blog-posts-wrapper 

设置为

        width: 48%;

因此您需要将其更改为 100%。

编辑：

    @media only screen and (max-width: 755px) {
         .blog-posts-wrapper  {
             width:100%;
         }
    }

如果它仍然不起作用，请将更改添加到 width:100%!important；

Answer 2

因为.blog-posts-wrapper有float: left，如果你想让它们在手机屏幕上居中，你必须设置float: none; margin: auto

@media (max-width: 767px) {
  .blog-posts-wrapper {
      float: none;
      margin: auto;
  }
}

或

如果您希望它们在移动屏幕上全宽，请设置：

@media (max-width: 767px) {
  .blog-posts-wrapper {
      width: 100%;
  }
}