Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to make sure snippet code is mobile friendly


theswoonspa

Question

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
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

1 answer to this question

Recommended Posts

  • 0

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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