如何在 wordpress 主题中隐藏移动设备上的图像

Question

我正在使用 OceanWP 免费 WordPress 主题，并且运行在移动设备上遇到 header 的问题。我在 header 上使用的图像在台式机上看起来不错，但在移动设备和平板设备上会被文本遮挡。我决定最好的粗略操作是将图像完全隐藏在桌面以外的任何东西上。

我已尝试在第 2621 行的样式表中添加此 code-snippet：

#site-header {
background-image: none;
}

该片段位于@media 语句中：

@media only screen and (max-width: 959px) {
[...]
}

我在缩小版中也添加了它，但图像仍然显示。

谁能看出我做错了什么？或者有不同的 work-around 可能有用吗？

Answer 1

在您的 style.min.css 中，转到该媒体查询并将 !important 添加到您的背景图片标签。

@media only screen and (max-width: 959px) {
 #site-header {
  background-image: none !important;
 }
}

此外，在开发网站时，请尽量不要缩小您的 css & js。完成所有操作后执行此操作，这样可以更轻松地进行编码和调整。

Answer 2

您的主题样式正在覆盖您自己的 css 文件。尝试更改 CSS 的加载顺序或在 background-image:none 之后添加 !important。像这样：

@media only screen and (max-width: 959px) {
    #site-header {
        background-image: none !important;
    }
}

顺便问一下，您似乎没有使用子主题。如果您想稍后在更新主主题时保留所有更改，则可能需要这样做。查看 this 了解更多详情。

How to hide an image on mobile in a wordpress theme