How to make sure snippet code is mobile friendly

Site URL: https://www.theswoonspa.com/book-an-appointment

Hi there,

I use Timely scheduling for my business. I used the snippet code from Timely and inserted it into my online booking page, which worked perfectly fine, however I am realizing that it is showing up very large on mobile and, in order to schedule, my clients have to scroll left-to-right. Is there a way to make it so sized correctly for both desktop and mobile?

This is the snippet I am using:
<iframe src="//swoonaestheticspa1.gettimely.com/book/embed?" scrolling="no" id="timelyWidget" style="width:750px;height:600px;border:none"></iframe>

Attached are screenshots of what it looks like on desktop versus what it looks like on mobile.

Add to Design > Custom CSS

/* resize code block mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1583198320993_6623 iframe {
    width: 100% !important;
}
}