Question

我在商店中使用WooCommerce，并使用Pakkelabels插件提供运输选项。运输选项出现在购物篮和结帐页面上。我需要在两个地方都调整运输选项的位置，以使其适合不同的移动屏幕。在购物篮页面上，我只需要执行一次，此后就没有问题。

在结帐页面上，我经常遇到问题。我会在更新后以及不时检查结帐页面，以确保其正常运行。几乎每次我检查时，送货选项就向右或向左移动，不再适合移动屏幕。这仅在手机屏幕上（而不是平板电脑）上发生。此外，在上次调整页面的CSS并刷新了所有可以找到的缓存之后的一段时间，我发现使用隐身窗口时页面看起来不同（错误），而使用不隐身的浏览器时页面看起来正确。

我的网站使用Page Biulder，并且CSS代码写在Page Builder的页面级CSS部分中。

我必须为左页边距使用许多不同的值，以使移动页面看起来正常，这没有任何意义，因为就像几周前可用的值一样，这还不够更多。然后，突然之间，文本移到了屏幕的另一侧，我实际上需要以右边距向右拉动它！

我已尝试连接/断开CDN，以确保它不是缓存弄糟的东西。我发现插入CDN的页面确实看起来与众不同，但是拔下CDN并不会阻止页面布局不时更改。

我尝试在查看隐身结果的同时编辑页面，这似乎有所帮助，但是当我检查隐身版本时，布局再次更改了（几周后，没有进一步的调整）。实际上，此时非隐身浏览器以应有的方式显示了该页面，而隐身页面则以不应该的方式显示了该页面。

现在，甚至在几周后（仍然没有进一步的调整）页面的隐身和非隐身视图都很好。

此代码在购物篮页面上运行良好：

#shipping_method {
    margin-left: auto !important;
}

@media only screen and (max-width: 479px) {
#shipping_method {
    margin-left: -70px !important;
    margin-top: 40px;
}
#shipping_method > li:nth-child(1) > div, #shipping_method > li:nth-child(2) > div, #shipping_method > li:nth-child(3) > div {
    display: none !important;
}
}

@media only screen and (min-width: 479px) and (max-width: 1100px) {
#shipping_method {
    margin-left: -70px !important;
    margin-top: 70px;
}
}

此代码是我在结帐页面上显示的当前代码：

@media only screen and (min-width: 479px) {
#shipping_method {
    margin-left: -220px !important;
    margin-top: 50px !important;
    max-width: 450px !important;
}
#pakkelabels_find_shop_btn {
    height: 50px !important;
}
}

@media only screen and (min-width: 350px) and (max-width: 479px) {
 #shipping_method {
    margin-top: 30px;
    max-width: 255px !important;
    margin-left: -70px !important;
}
}

@media only screen and (max-width: 350px) {
 #shipping_method {
    margin-top: 30px;
    width: 180px !important;
    margin-left: -40px !important;
}
}

如您所见，两个页面上的左边距均为-70。但是在结帐页面上大约是170点！直接的结果是，该页面在移动设备上看起来不错，只是在某些时候又变回不正常。

我知道我已经写过页面的两个版本现在看起来都不错，但是我也知道这只是暂时的，如果我找不到真正的解决方案。

任何想法是什么问题，怎么办？

在CSS设置更改后很长时间（不太可能由于缓存），页面布局会自行更改

0 个答案: