Question

我一直在互联网上搜索如何解决这个问题。基本上我需要桌面视图右侧的按钮。见下文： chrome view

但是当你调整大小或在移动设备上观看时，它应该是全宽的，但我不能这样做。见下文：

这也是一个粘性或滚动菜单。这是我的代码：

/* call button small*/
.buttonfloat-small{
position:fixed;
bottom:0px;
text-align:center;
z-index: 99;
display:block;
width:100%;
margin: auto;
}

谢谢！

Answer 1

您可以使用以下方法执行此操作：

.buttonfloat-small div a.fl-button {width:100%}
.buttonfloat-small div {margin:0!important}

或直接定位节点：

a.fl-button {width:100%}
.fl-node-5907a486bf15a > .fl-module-content {margin:0}

这将使它看起来像这样：https://i.stack.imgur.com/epv0B.png

侧注：第一个div上的重要覆盖是从“.fl-node-5907a486bf15a＆gt; .fl-module-content”中删除20px右边距。直接调用它不需要重要标记（因此两个例子）。

这必须放入您的媒体查询中，使其仅在调整大小时显示为全宽，例如：

@media (max-width: 768px){
    .buttonfloat-small div a.fl-button {width:100%}
    .buttonfloat-small div {margin:0!important}
}

更改文本以从Call Us On更改为Call Now，我个人会像这样使用JQuery：

$(document).ready(function() {
    var button = $(".buttonfloat-small div a.fl-button span.fl-button-text"),
        resize = function() {
            if (window.matchMedia('(max-width:767px)').matches) {
                button.html("Call Now 0330 838 1828");
            } else {
                button.html("Call Us On 0330 838 1828");
            }
        };
    $(window).resize(resize);
    resize();
});

这将检查宽度是否为767，如果是，那么它将显示Call Now，否则它将显示Call us，并且在窗口调整大小时也会改变。

这是一个显示效果的JSFiddle：https://jsfiddle.net/awwy5ram/1/

如果您需要更多帮助，请与我们联系！

如何使按钮响应移动

1 个答案: