Як прибрати відступи навколо полів у календарі бронювання Baza на мобільному пристрої

Якщо тема вашого веб-сайту використовує контейнер із відступами, і ви помітили, що у «Baza Booking Calendar» на мобільних пристроях з’являються небажані бічні поля, ви можете легко виправити це за допомогою простого CSS-рішення.

Проблема

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

Рішення

Додайте наступний CSS-код до файлу «custom 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;
    }
}