如何在 WordPress 中添加自定义 CSS 以在移动屏幕上显示？

Question

我正在使用 BeTheme，一个高级 WordPress 主题。我编辑了 CSS 并添加了这个，

.the_content_wrapper{
  font-size:27px;
  line-height:1.6em;
  padding-left:270px;
  padding-right:270px;
  position:relative;
  font-family:Oxford1;
}

在桌面上查看时效果很好，但当我检查使用 Inspect Elememt 在 iPhone 和其他手机上的显示时，我根本无法阅读。由于填充，它完全是空白的。当我将填充更改为 0 时，网站再次响应。

我该如何纠正它？

我尝试安装适用于手机和 Jetpack 的自定义 CSS，但我发现的代码不起作用。我不知道要使用什么 div 或类。

你们都可以帮助我吗？如何在移动设备中显示，使其看起来响应灵敏。

谢谢你！

Answer 1

您需要像这样使用媒体查询：

@media (max-width:1024px){
    .the_content_wrapper{
        font-size:27px;
        line-height:1.6em;
        padding-left:0px;
        padding-right:0px;
        position:relative;
        font-family:Oxford1;
    }
}

@media (min-width:1025px){
    .the_content_wrapper{
        font-size:27px;
        line-height:1.6em;
        padding-left:270px;
        padding-right:270px;
        position:relative;
        font-family:Oxford1;
    }
}

NB 相应地编辑宽度