Ako odstrániť vyplnenie kontajnerov z rezervačného kalendára Baza na mobilných zariadeniach

Ak šablóna vašej webovej stránky používa kontajner s vnútorným odsadením a všimnete si, že kalendár rezervácií Baza má na mobilných zariadeniach nežiaduce bočné okraje, môžete to ľahko vyriešiť pomocou jednoduchého CSS riešenia.

Problém

Mnohé šablóny WordPressu umiestňujú obsah do kontajnerov s odstupom vľavo a vpravo (na mobilných zariadeniach zvyčajne 15px – 30px). Tento odstup vytvára okolo rezervačného kalendára dodatočný biely priestor, v dôsledku čoho na menších obrazovkách pôsobí stiesnene.

Riešenie

Pridajte nasledujúci kód CSS do súboru vlastného CSS vašej šablóny alebo do súboru style.css:

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

Ako to funguje

Tento kód využíva záporné okraje, aby „vytiahol“ kalendár za rámec vnútorného odsadenia kontajnera, čím sa na mobilných zariadeniach rozprestrie na celú šírku obrazovky.

Nahraďte –container_padding skutočnou premennou pre odsadenie kontajnera vo vašej šablóne alebo použite konkrétnu hodnotu:

Použitie premenných CSS (ak to vaša šablóna podporuje):

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

alebo

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