Question

对于我的电子商务网站，当您单击产品并“添加到购物车”时，会出现一条消息，显示“此商品已添加到您的购物车”，并带有一个框，显示“查看购物车”。

问题是“查看购物车”按钮在移动设备上跳动。（它在桌面上也跳了一点，但还不算太糟）。我已经检查了消息框和按钮的css代码，我什么都看不见，这是压倒一切并使它跳跃的。有人知道是什么原因造成的吗？

页面为https://ffe-dev.flowersforeveryone.co.za/product/charming-soft-pink-roses/。

消息框的CSS是-

.woocommerce-message.lsx-woocommerce-message-wrap {
    border: none;
    border-radius: 0px;
    background-color: #c1e3b2;
    text-transform: uppercase;

.woocommerce-error, .woocommerce-info, .woocommerce-message {
    padding: 1em 2em 1em 3.5em;
    margin: 0 0 2em;
    position: relative;
    background-color: #c1e3b2;
    list-style: none outside;
    width: auto;
    font-size: 17px;
    text-align: center;
}

Answer 1

嘿，添加以下样式并重新检查。

@media(max-width:767px){
 .woocommerce-message.lsx-woocommerce-message-wrap{
   display:block;width:100%;
 }
}

Woocommerce添加到购物车按钮跳转

1 个答案: