Forum Discussion
Responsive design issues for embedded Booking Pages
I noticed a scaling issue on my phone (and other people's phones) when I tried to embed the Booking page into another web site via an i-Frame.
I can also reproduce the same issue using Chrome on my desktop. Just switching to responsive more or using the Galaxy Fold 5 for instance cuts of the call type tile and the section to choose a time.
Experimenting with the style, there are 2 things that need to be changed by the dev team:
- Change width to max-width in https://res.public.onecdn.static.microsoft/owamail/hashed-v1/scripts/owa.BookingsC2Boot.fbfb43ec.css
.NnOP0 .BgxoD,.Nrxsv .L5pev {
background-color: #fff;
height: 136px;
max-width: 338px;
} - Change width value to 100% or -webkit-fill-available
.Qihpq {
margin: 32px auto 16px;
width: -webkit-fill-available;
}
Looks great for me afterwards.
Now, that might not be complete. I have not checked if there is multiple tiles for call types. But either way, this should mitigate the issue I and, I am sure, others have - especially when embedding the widget into other pages.
After applying those fixes, it looks like this:
I am experiencing the same problem!! It's a CSS issue on Microsoft's part. PLEASE FIX ASAP! Bookings is basically unuseable on mobile because of this issue!
I recommend opening a support ticket with Microsoft, but don't let them close it until the issue is fully resolved. They often claim because they have discussed it with you and then moved it to some development backlog, they are required to close the ticket. I made it clear that unless the fix is deployed, I will keep the ticket open. If they close it, I simply reopen it after a week or so.
