Jak usunąć wypełnienie ramki w kalendarzu rezerwacji Baza na urządzeniach mobilnych

Jeśli motyw Twojej strony internetowej wykorzystuje kontener z wypełnieniem i zauważysz, że kalendarz rezerwacji Baza wyświetla niepożądane marginesy boczne na urządzeniach mobilnych, możesz to łatwo naprawić za pomocą prostego rozwiązania CSS.

Problem

Wiele motywów WordPressa umieszcza treść w kontenerach z wypełnieniem po lewej i prawej stronie (zazwyczaj 15-30 pikseli na urządzeniach mobilnych). To wypełnienie tworzy dodatkową białą przestrzeń wokół kalendarza rezerwacji, przez co na mniejszych ekranach wygląda on na ściśnięty.

Rozwiązanie

Dodaj poniższy kod CSS do pliku niestandardowego CSS swojego motywu lub do pliku style.css:

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

Jak to działa

W tym kodzie wykorzystano ujemne marginesy, aby „wysunąć” kalendarz poza wypełnienie kontenera, dzięki czemu na urządzeniach mobilnych zajmuje on całą szerokość ekranu.

Zastąp –container_padding rzeczywistą zmienną odpowiadającą odstępom w kontenerze w Twoim motywie lub użyj konkretnej wartości:

Korzystanie ze zmiennych CSS (jeśli motyw to obsługuje):

: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);
    }
}

lub

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