Why is my embedded Bookings page cut off or broken on mobile?

Why 100% height collapses#

The snippet Microsoft's 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. 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. 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 Microsoft's own 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 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 Microsoft's 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. BookingsXP is independent and not affiliated with or endorsed by Microsoft.