How to set different sizes for the booking widget?

The booking widget displays in one of three views automatically according to the available width - Wide, Overlaid time slots and a Narrow view.



The width of the parent HTML element in which the booking widget shortcode is placed determines which view the booking widget is displayed in.
Wide view - From 1000px and more. (E.g Full width content area without sidebar)
Slots overflow view - From 700px to 999px. (E.g Content area with sidebar)
Narrow view - From 699px and below. (Closer to mobile view, can be used in desktop view).

Note: The views cannot be set manually. It'll be displayed automatically according to the available width.

Wide view - Parent element having a width 1000px and more.

Wide view

Wide view - with time slots

Overlaid time slot view - Parent element of width from 700px to 999px.

Overlaid time slot view

Overlaid time slot view - with time slots

Narrow view - Parent element of width from 699px and below. Similar to mobile view.

Narrow view

Narrow view - with time slots

Narrow view will be used in mobile. For Tablets it will automatically adjust based on available width.

Updated on: 06/08/2021

Was this article helpful?

Share your feedback

Cancel

Thank you!