How to Remove Container Padding from Baza Booking Calendar on Mobile

If your website theme uses a container with padding and you notice that Baza Booking Calendar has unwanted side margins on mobile devices, you can easily fix this with a simple CSS solution.

The Problem

Many WordPress themes wrap content in containers with left and right padding (typically 15px-30px on mobile). This padding creates extra white space around the booking calendar, making it look cramped on smaller screens.

The Solution

Add the following CSS code to your theme’s custom CSS or style.css file:

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

How It Works

This code uses negative margins to “pull” the calendar beyond the container’s padding, making it span the full width of the screen on mobile devices.

Replace –container_padding with your theme’s actual container padding variable, or use a specific value:

Using CSS Variables (if your theme supports it):

:root {
    --container_padding: 20px;
}

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

or

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