Jump to content

How to make sure snippet code is mobile friendly

Recommended Posts

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. 1653845116_ScreenShot2021-04-16at9_58_29AM.thumb.png.27b1ae1620f1db91f3db751833096c84.png2020583497_ScreenShot2021-04-16at9_58_57AM.thumb.png.356e3f6809124b991b539ef05725afab.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.