时间戳

首页 > 解决方案 > 我们的通知栏无法按预期在移动设备上运行

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

问题描述

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

请给我们建议。

谢谢，戈帕尔

标签： htmlcssscrollmediamarquee

解决方案

那是因为有一种风格!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;
    }
}

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

推荐阅读