时间戳

首页 > 解决方案 > Shopify 购物车计数器未在平板电脑 (IPAD) 中显示对齐

css - Shopify 购物车计数器未在平板电脑 (IPAD) 中显示对齐

问题描述

嗨，我正在尝试建立 shopify 商店，一切都很完美，但有 1 个问题购物车计数器在 IPAD 中未显示对齐。我正在使用一个类代码'

span.countPill {
    background: #f0e3d3;
    border-radius: 50%;
    padding: 1px 6px;
    font-size: 10px;
    position: absolute;
    top: -8px;
    right: 0;
}

我试过媒体查询代码在这里

@media (min-width:767px) and (max-width:800px){
span.countPill{
background: #f0e3d3;
border-radius: 50%;
padding: 1px 6px;
font-size: 10px;
position: absolute;
top: 9px;
right: 0;
left: -3px !important
}

网站链接在这里

标签： cssshopifyresponsive

解决方案

对于 768ps 到 991px 的尺寸，保持新购物车的宽度为 24px 并更改 .navPages-mobile-container span.countPill 类中的填充和顶部，如下所述：

@media (min-width:768px) and (max-width:991px){
.new-cart {
    width: 24px;
    margin-right: 2px;
}
.navPages-mobile-container span.countPill {
    background: #f0e3d3;
    border-radius: 50%;
    padding: 1px 7px;
    font-size: 10px;
    position: absolute;
    top: 10px;
    right: 0;
}
}

推荐阅读