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

在第95行

上删除 modal.less 中的#theradome-proonto

此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 2673 style.css 中的内容是什么？因为当我在浏览器中打开 style.css 时，我会在第2671行 - /* rules for all mobile resolutions (< 768) */上看到以下注释，后面是我之前提到过的CSS。

如果你找不到它，我的最后一条建议就是 - 尝试将我添加的CSS（display: block !important）添加到 style.css的末尾

Div与位置：固定在移动响应式设计中不可见

1 个答案: