Responsive iFrame for Outlook Bookings Page??

I have a bookings page set up through Outlook and would like to have it appear correctly on the mobile version. The desktop version seems fine but the mobile version is cutoff quite a bit and very difficult to navigate. This is the code that I am currently using:

<iframe src="https://outlook.office.com/bookwithme/user/61af79c8aef94946a0589f61fd7b7234%40LongandFoster.com/meetingtype/lAuxNDmwo028U_MGCos0fw2?anonymous" scrolling="no" width="1100" height="800" frameborder="0">
 
</iframe>

Change width to 100%.

@Ziggy Thank you for the response. The mobile version still looks incorrect. Any other suggestions?

https://teal-smilodon-2ljx.squarespace.com/appointments

The contents of the iframe aren't acting responsively, it's one of the main problems with iframes. Honestly though if you load the booking page in it's own window on mobile it isn't responsive, so there's not much you can do to improve it.

https://outlook.office.com/bookwithme/user/61af79c8aef94946a0589f61fd7b7234%40LongandFoster.com/meetingtype/lAuxNDmwo028U_MGCos0fw2?anonymous

@Ziggy would there be a way to shrink the entire "appointments" block on mobile so that it fits the space? I know this would make all of the text teeny tiny, but wanted to compare my options.

@Travis_Ampersandsince the content is inside an iframe there's literally nothing you can do to make the content inside change at all. 

@jaeveedee One more thought, is there a way that I can hide the appointments page only on the mobile site? 

Yea something like this might work to remove it from navigation but if you have buttons in other places that will need to be hidden too.

.header-menu [data-folder="/sendamessage-folder/"] .header-menu-nav-item:last-child {
  display: none;
}

@jaeveedee Thank you! It appears to have worked.