A user embedded an appointment booking form (from workiz.com) on their Shopify store but it’s not responsive across devices. The form displays with unwanted scrollbars and doesn’t properly resize between mobile and desktop views.
Proposed Solutions:
theme.liquid above the </head> tag, targeting the specific page handle (‘book-now’) to make the iframe responsivetheme.liquid, also using conditional logic based on the page handleBoth solutions use CSS to set the iframe to 100% width and auto height, wrapped in Liquid conditionals to apply only on the booking page. The issue appears unresolved as the original poster hasn’t confirmed whether either solution worked.
Hello, I need some help with this appointment booking form. I need it to resize to mobile dimensions but also to computer screen dimensions depending on what the user is on. Here is the link to my website: https://marinprestige.com/pages/book-now. And here is the embed code I was given:
<iframe src="https://online-booking.workiz.com/?ac=0b27e82f3bbad1cccc3d3677e8f014ec121f3e9c6a185f0d99af5665d43d8ef3" width="100%" height="700px" style="border:none;"></iframe>
@cedelgado you want to remove right scroll? right
Hi @cedelgado
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
{% if handle contains 'book-now' %}
{%endif%}
Hope this can help you solve the issue
Best regards,
Richard | PageFly
@cedelgado please paste this code in theme.liquid at the end
{% if handle contains 'book-now' %}
{% endif %}