如何使按钮在移动设备上响应

Question

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

但是当你调整它的大小或在移动设备上查看时，它应该是全角的，但我做不到。见下文：

mobile 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 > .fl-module-content”中删除 20px 右边距。直接调用它不需要 important 标记（因此这两个示例都是如此）。

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

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

将文本从“致电我们”更改为“立即致电”，我个人会像这样使用 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，如果是，则显示“立即呼叫”，否则将显示“呼叫我们”，并且在 window 调整大小时也会更改。

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

如果您需要更多帮助，请告诉我！

如何使按钮在移动设备上响应

how to make a button responsive on mobile

css

wordpress

button

css-float