So entfernen Sie die Container-Abstandshalter aus dem Baza-Buchungskalender auf Mobilgeräten

Falls das Theme Ihrer Website einen Container mit Innenabstand verwendet und Sie feststellen, dass der Baza-Buchungskalender auf Mobilgeräten unerwünschte Seitenränder aufweist, können Sie dies ganz einfach mit einer CSS-Lösung beheben.

Das Problem

Viele WordPress-Themes umschließen Inhalte mit Containern, die über einen Abstand nach links und rechts verfügen (auf Mobilgeräten in der Regel 15px-30px). Dieser Abstand sorgt für zusätzlichen Leerraum um den Buchungskalender herum, wodurch dieser auf kleineren Bildschirmen beengt wirkt.

Die Lösung

Fügen Sie den folgenden CSS-Code in die benutzerdefinierte CSS-Datei oder die style.css-Datei Ihres Themes ein:

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

So funktioniert es

Dieser Code nutzt negative Ränder, um den Kalender über den Abstand des Containers hinaus zu „ziehen“, sodass er auf Mobilgeräten die gesamte Bildschirmbreite einnimmt.

Ersetzen Sie „–container_padding“ durch die tatsächliche Variable für den Container-Abstand Ihres Themes oder geben Sie einen bestimmten Wert ein:

Verwendung von CSS-Variablen (sofern Ihr Theme dies unterstützt):

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

oder

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