Question

我们的company website是使用WordPress + Forest主题构建的。

要获得全宽度博客，我们必须从相关模板中删除侧边栏并添加以下自定义CSS：

blog .site-content, .single .site-content  { width: 70%; max-width: 70%; margin: auto; }

这适用于桌面和大多数其他设备和屏幕尺寸。

然而，智能手机的显示效果不是很好，因为双方的利润率都太大了。

因此，我们尝试使用以下自定义CSS来修复它，但它似乎没有改变智能手机上的显示：

@media (min-width: 992px) .blog .site-content, .single .site-content  { width: 90%; max-width: 90%; margin: auto; }

知道这里有什么问题以及如何解决它？

感谢。

Answer 1

如果你想在较小的显示器上使用较小的边距，那么它应该是

@media (max-width: 992px) {
   .blog .site-content, .single .site-content { 
        width: 90%; max-width: 90%; margin: auto; 
   }
}

Answer 2

您的@media代码缺少一些大括号（{和}），您需要使用max-width，而不是min-width。我通常也会将@media handheld添加到我的移动CSS中。

@media (max-width: 992px),
@media handheld {
    .blog .site-content, .single .site-content { 
        width: 90%; max-width: 90%; margin: auto; 
    }
}

WordPress博客响应

2 个答案: