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

Question

我们的网站是wordpress，下面是link供大家参考。

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 或媒体查询以在所有设备上正确反映。

请多多指教

谢谢，戈帕尔

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;
    }
}

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

Answer 2

在样式编辑器中添加此 css

@media only screen and (max-width: 767px){
.foobar-container-inner {
    margin-left: 0important;
    width:100%!important;
    margin-top: -40px!important;
}
#foobar-message-0 {
    width:100%!important;
}
}

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

Our notification bar not works on mobile devices as expected

html

css

scroll

media

marquee