Как удалить отступы контейнера из календаря бронирования Baza на мобильных устройствах

Если в шаблоне вашего сайта используется контейнер с отступами, и вы заметили, что у календаря бронирования Baza на мобильных устройствах появляются нежелательные боковые поля, эту проблему можно легко устранить с помощью простого CSS-решения.

Проблема

Во многих темах WordPress контент размещается в контейнерах с отступами слева и справа (обычно 15-30 пикселей на мобильных устройствах). Эти отступы создают лишнее пустое пространство вокруг календаря бронирования, из-за чего он выглядит тесно на небольших экранах.

Решение

Добавьте следующий код CSS в файл «Пользовательский CSS» вашей темы или в файл style.css:

@media (max-width: 768px) {
    #baza-booking-calendar {
        margin-right: -15px;
        margin-left: -15px;
    }
}

Как это работает

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

Замените —container_padding на фактическую переменную отступа контейнера вашей темы или используйте конкретное значение:

Использование переменных CSS (если ваша тема их поддерживает):

:root {
    --container_padding: 20px;
}

@media (max-width: 768px) {
    #baza-booking-calendar {
        margin-right: calc(var(--container_padding) * -1);
        margin-left: calc(var(--container_padding) * -1);
    }
}

или

@media (max-width: 768px) {
    #baza-booking-calendar {
        margin-right: -20px;
        margin-left: -20px;
    }
}