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.
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. Read More
