WooCommerce 购物车图标在移动设备上消失

Question

我在许多论坛上阅读了 CSS 解决方法，但这对我没有帮助。现在已经花了几天时间尝试各种事情。

对我来说，在手机上查看时购物车图标会消失。

当我检查元素时，代码如下：

<div class="dt__mobilenav-right">
    <ul class="dt__navbar-list-right">
        <li class="dt__navbar-cart-item">
            <a href="javascript:void(0);" class="dt__navbar-cart-icon">
                <span class="cart--icon">
                    <strong class="cart-count">0</strong>
                </span>
            </a>
            <div class="dt__navbar-shopcart">
                <p class="woocommerce-mini-cart__empty-message">Cart is empty.</p>
            </div>
        </li>
    </ul>
</div>

在 woo-styles.css 中我有以下内容：

header .cart-contents,
.mobile-header .cart-bar-toggle {
    position: relative;
}
header .woo-icon-count,
.mobile-header .woo-icon-count {
    color: var(--dt-whi-color);
    border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -webkit-border-radius: 50%;
    font-size: 9px;
    height: 14px;
    line-height: 14px;
    position: absolute;
    right: -10px;
    text-align: center;
    top: -10px;
    width: 14px;
}

所以我认为我已经接近目标，但不知道如何执行修复。也许更了解 CSS 如何工作的人可以帮助我并指出我应该做什么。

我尝试在下面添加CSS：

@media only screen and (max-width: 420px) {
    .shopping_cart_outer {
       display:table !important;
    }
}

Answer 1

.dt__mobilenav-right是max-width:28.75em时不显示的类； 为了保持它的活力，你应该修改你的 CSS，如下所示：

@media (max-width: 28.75em)
.dt__mobilenav-right {
    display: block !important; 
}