Div与位置:固定不可见的移动响应式设计

Question

我有一个网站与在线聊天脚本集成。我们创建了一个图像按钮，而不是公司提供的默认链接。

图像所在的div被标记为位置固定，并且在桌面浏览器的右下角可见。

如果我打开相同的移动设备，div是不可见的，虽然设计是响应。

下面是两个版本

使用的CSS

@media (max-width: 768px){
 #theradome-proonto {
 position: fixed;
 bottom: 30px;
 right: 12px;
 background: white;
 z-index: 99999;
 -webkit-backface-visibility: hidden;
}
}
@media (min-width: 768px){
 #theradome-proonto {
 position: fixed;
 bottom: 30px;
 right: 12px;
 background: white;
 z-index: 99999;
}
}

我的网站是http://www.theradome.com它是内置在wordpress

Answer 1

删除模式中的#theradome-proonto。less on Line 95

这个css规则将display: none设置为div#theradome-proonto这是影响div正确显示的CSS规则。

@media screen and (max-width: 767px)
    #STM_root_elem, #theradome-proonto, .doctor_trusted {
        display: none !important;
}

尝试通过以下CSS

来重写此设置

@media (max-width: 768px){
    #theradome-proonto {
        position: fixed;
        bottom: 30px;
        right: 12px;
        background: white;
        z-index: 99999;
        -webkit-backface-visibility: hidden;
        display: block !important; /* this line is important! */
    }
}

编辑2 什么是在你的style.css线上2673?因为当我在浏览器中打开style.css时，我看到以下关于第2671行 - /* rules for all mobile resolutions (< 768) */的评论，后面跟着我之前提到的CSS。

如果你找不到，我最后给你的建议是-试着把我添加的CSS(这个是display: block !important)放在你的style.css