html - 我们的通知栏无法按预期在移动设备上运行

Question

我们在 wordpress 中有我们的网站，下面是供您引用的链接。

https://timesandtrendsacademy.com/

有一个 foobar，它以粘滞和滚动模式显示在我们网站每一页的底部。 我已经为全宽外观放置了一些自定义 css，下面供您引用，

.foobar-container-left{display:none;}
.foobar-container-right{display:none;}
#foobar-message-0{width:100%;}

@media only screen and (max-width:500){
#branches{width:100%;}
}

它在桌面上运行完美，但当我们调整屏幕大小时或当我们在移动设备上打开时，宽度不是全宽。 它以 150 像素的宽度显示，这在移动设备上看起来不太好。

我们必须添加一些 css 或媒体查询以在所有设备上正确反射(reflect)。

请多多指教。

谢谢， 戈帕尔

Answer 1

那是因为有一个带有 !important 的样式会覆盖您的样式。

@media only screen and (max-width: 800px) and (min-width: 320px) {
    #foobar-message-0 {
        margin-top: 10px;
        width: 150px!important;
    }
}

删除 !important，编辑样式，或使用带有 !important 的更具体的选择器。

例子:

@media only screen and (max-width: 800px) {
    #foobar-message-0 {
        width: 100%!important;
    }
}

这些样式应该在要覆盖的样式之后。