Customize Microsoft Bookings embedded Booking page with specific css styles

Question

Hello,

I am currently integrating a Microsoft Bookings page into a WordPress page using an iFrame and the Microsoft Bookings embed code.

I am trying to change a couple things:

1. Force a word wrap (we have a questionnaire built into our booking page, and one of the questions is a little lengthly, and the text just runs right off the frame). I have identified the specific class I need to change using browser inspect tool and can modify it there, but when I modify that class in the custom css in wordpress is does nothing. I've tried copying the full selector from inspect too as well.
   • Class needing changing: .WpLer {white-space: nowrap}, I want to change nowrap to normal. owa.BookingsC2Boot.css is the style sheet it's referencing.
2. Change max-width (the Microsoft Bookings app max width is less than my page inner max width, leaving unnecessary spacing on either side of the booking form. Again, can change this in browser inspect but not in Wordpress custom css.
   • Class needing changing: .Qkr3P {max-width: 1024px;}, I want to change to 1250px.

Is there any way to override these settings??

Thanks.

Andrea

Answer 1

Hello Andrea Cook,

Good day. Thank you for posting in Microsoft Community.

Regarding your query on customizing Microsoft Bookings embedded bookings page, please understand that this query is outside of our support boundaries.

For you to be assisted properly, please reach out to Microsoft Bookings community by visiting this website Microsoft Bookings - Microsoft Community Hub. I am sure that our experts from that team can address your query effectively and accurately.

Thank you for your cooperation and understanding. Please do not hesitate to post your queries to Microsoft Community and we will always do our best to assist you!

Sincerely,

Ashraf.

Answer 2

Thanks for the reply, have followed your link and posted in the Microsoft Bookings Community Hub.