Макет страницы меняется сам по себе, долгое время после изменения настроек CSS (маловероятно из-за кеша) - PullRequest
Новая
       14

Макет страницы меняется сам по себе, долгое время после изменения настроек CSS (маловероятно из-за кеша)

0 голосов
/ 03 апреля 2019

Я использую WooCommerce в своем магазине и плагин Pakkelabels для вариантов доставки. Варианты доставки отображаются в корзине покупок и на странице оформления заказа. В обоих местах мне нужно было настроить положение вариантов доставки так, чтобы они подходили под разные мобильные экраны. На странице корзины покупок мне нужно было сделать это только один раз, и с тех пор у меня не было с этим проблем.

На странице оформления заказа возникли повторяющиеся проблемы. Я проверяю страницу оплаты как после обновлений, так и время от времени, чтобы убедиться, что она работает. Почти каждый раз, когда я проверяю, варианты доставки перемещаются вправо или влево и больше не соответствуют экрану мобильного телефона. Это происходит только на мобильных экранах (не на планшетах). Кроме того, через некоторое время после того, как в последний раз я настроил CSS страницы и сбросил все кэши, которые я смог найти, я обнаружил, что страница выглядит иначе (неправильно) при использовании окна в режиме инкогнито и правильно при использовании браузера без инкогнито.

Мой сайт использует Page Biulder, а код CSS написан в разделе CSS на уровне страницы Page Builder.

Мне пришлось использовать МНОГИЕ различные значения для поля left-left, чтобы заставить мобильную страницу выглядеть хорошо, что не имеет смысла, потому что это похоже на значение, которое работало несколько недель назад, не достаточно Больше. И затем, внезапно, текст перемещается на другую сторону экрана, и мне действительно нужно отодвинуть его назад с полем вправо!

Я попытался подключить / отключить 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! И немедленный результат состоял в том, что страница на мобильном телефоне выглядела нормально, но в какой-то момент снова сменилась на не очень.

Я знаю, что написал, что обе версии страницы теперь выглядят нормально, но я также знаю, что это только временно, если я не найду реального решения.

Есть идеи, в чем проблема и что делать?

...