如何在WordPress主题中隐藏手机上的图像

我使用的是OceanWP免费WordPress主题, 并且在移动设备上出现标题问题。我使用的标题图片在台式机上看起来不错, 但是在移动设备和平板电脑上却被文字遮住了。我已决定最好的粗略做法是将图像完全隐藏在非桌面上。

我试图在2621行的样式表中添加此代码段：

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

该代码段位于@media语句中：

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

我还以缩小版本添加了它, 但是图像仍在显示。

谁能看到我做错了吗？还是有其他可行的解决方法？

#1

在你的style.min.css中, 转到该媒体查询, 然后将！important添加到背景图像标签中。

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

另外, 在开发网站时, 请尽量不要缩小CSS和JS。一旦完成所有操作, 就可以更轻松地编写代码和进行调整。

#2

你的主题样式将覆盖你自己的CSS文件。尝试更改CSS的加载顺序, 或在background-image：none之后添加！important。像这样：

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

顺便说一句, 你好像没有使用儿童主题。如果要在以后更新主主题时保留所有更改, 则可能需要这样做。看看这个以获得更多细节。