Hey there @Christophe20085 -- great question, and I’ve got answers!
There are three different Calendly scheduling page layouts — the style that is displayed depends on the width of the browser window or, in the case of the embed, the width of the parent element.
A screenshot of each scheduling page layout along with the breakpoints can be found below:
LARGE WINDOW LAYOUT: >= 1000PX
MEDIUM WINDOW LAYOUT: < 1000PX, >= 650PX
SMALL WINDOW LAYOUT: < 650PX
With that in mind! One of the parent elements of the embed is likely restricting the width - you will need to ensure that the embed has at least 1000px of space on desktop. Check out the info below and then use that to try to fix this for yourself!
Please know that the embed is responsive. The embed layout will adjust to the size of the screen or the element that is holding it. The default view is to display the event details on the left and the calendar on the right, side-by-side, as seen below:
The column view happens when the embed is on a web page, or inside a parent HTML elementwhose width forces the width to shrink and the elements to stack.
You can force a layout appearance by changing the width of the parent HTML element that is holding the embed code. The reason for this is that the parent HTML element that is holding the embed is what determines the amount of room that the embed can take up on the web page.
You will want to work with a web developer to adjust the width to the parent element that is holding the embed code on your website. You will not change any of the values on Calendly embed code.
To make the view stack
You can test out this responsive design by looking at your website with the embed and then reducing the width of your browser window.
Decrease the width of the HTML element that is holding the embed.
To make the view side-by-side
Increase the width of the HTML element that is holding the embed.
