Why is my embedded Bookings page cut off on mobile?

Why 100% height collapses#

The snippet the Bookings Embed option produces is not documented, but the version users copy looks like this:

<iframe src='https://outlook.office.com/book/YourBusiness@contoso.com/?ismsaljsauthenabled'
        width='100%' height='100%' scrolling='yes' style='border:0'></iframe>

In most page builders the iframe sits inside a block with no set height. A 100% height of "nothing specified" falls back to the browser's small default box, so visitors see a compressed calendar and an inner scroll bar. That matches the Microsoft Q&A threads with 50+ and 6 "same question" votes.

Fix it with a fixed height#

Give the frame an explicit height and let CSS handle the width:

<iframe class="bookings-embed"
        src="https://outlook.office.com/book/YourBusiness@contoso.com/?ismsaljsauthenabled"
        title="Book an appointment" loading="lazy"></iframe>

.bookings-embed {
  display: block;
  width: 100%;
  max-width: 1000px;
  min-height: 900px;
  border: 0;
  margin: 0 auto;
}

/* Services, calendar and time slots stack vertically on phones */
@media (max-width: 640px) {
  .bookings-embed {
    min-height: 1400px;
  }
}

The pixel values are starting points, not Microsoft figures. If you haven't copied the embed code yet, where to find the embed code shows where it lives. Open your page, click through every step (service, date, time, details form) and raise the height until no step needs an inner scroll bar. Pages with many services or custom fields need more.

If the frame won't stretch to full width in a flex or grid layout, the second answer on the 50+ vote Q&A thread works: set the parent to display: flex and the iframe to width: 100% so it fills the row.

Why you can't make it "just fit"#

A cross-origin iframe can only resize to its content if the framed page reports its height to the parent (usually with postMessage). Microsoft doesn't document any such messages or a JavaScript embed, and a 2021 Tech Community request for one went unanswered. When we captured the embedded page and the calls it makes in September 2026, we found nothing it sends to the parent page at all, height included, so an auto-resize script on your side has nothing to work with. So as of September 2026 you choose between:

• a tall fixed height (some white space on short steps), or
• a shorter height with scrolling inside the frame.

On mobile the first is usually better, because a scroll area inside a scrolling page is awkward to use with a thumb.

Mobile problems you can't fix from your side#

In a 2024 Tech Community thread, a user found that on phones the call-type tile and the time picker were cut off inside the embedded page. They traced it to fixed widths in the Bookings stylesheet and showed that switching them to max-width fixed it, but that change has to be made by Microsoft. A 2025 reply in the same thread still reported the problem. Your CSS can't restyle anything inside the frame (see custom CSS on Bookings pages).

If the frame is blank rather than short, that's a different problem: see the refused-to-connect fix. If the mobile view is unusable for your audience, a practical fallback is to show a "Book an appointment" button on small screens that opens the booking link in a new tab, where the Bookings page gets the full viewport.

Doing this with BookingsXP#

The BookingsXP widget's inline mode resizes to its content, so there is no fixed height to guess and no inner scroll bar on phones. It uses your existing shared booking page link and creates the booking in Microsoft Bookings as usual. The popup mode is an option if you prefer a button on mobile. See the embed feature or try it with your booking page. BookingsXP is independent and not affiliated with or endorsed by Microsoft.