Mobile responsiveness is not working in Shopify website

  • Lumativ
    Asked on March 30, 2015 at 3:56 PM

    Hi - I just recently started using JotForm and have ran into a pretty elementary issue that I'm not sure how to fix.. 

    We have one of our forms embedded into a blank page on our site and it will not resize when on mobile.  Works fine on desktop.  Seems like this is a common issue that has to do with being wrapped within Shopify's page??  I haven't been able to find any answers... Can anyone help?

    Here is the page we are trying to get working properly.. I am using the simple embed script and "responsive" is set on both the properties of the form and within the designer in Jot Form..

    http://www.lumativ.com/pages/custom

     

     

    Thanks!

  • raul
    Replied on March 30, 2015 at 4:15 PM

    I've checked your page using my phone and this is how it looks like.

    Mobile responsiveness is not working in Shopify website Image 1 Screenshot 20

    Can you let us know which device are you using to test? It would be great if you can also share a screenshot on how the site looks on your side.

    Thank you.

  • Lumativ
    Replied on March 30, 2015 at 4:29 PM

    Hey Raul - Thank you for the quick reply!  Really appreciate the great support.

    Weird... My phone (and others in our office) dont work correctly.. Looks like yours is.. Are you looking at it on Android??  We are all using Iphones (mostly Iphone 5 ).  I have tried both Safari and Chrome and both have the same results.

    Here are some screenshots

    Mobile responsiveness is not working in Shopify website Image 1 Screenshot 40

    Mobile responsiveness is not working in Shopify website Image 2 Screenshot 51

    Mobile responsiveness is not working in Shopify website Image 3 Screenshot 62

  • jonathan
    Replied on March 30, 2015 at 4:39 PM

    Thank you for providing to us the screenshot. We can see the inconsistency base on your screenshot.

    I suggest checking also the user guide on -How-to-make-forms-Mobile-Responsive

    Adding the Mobile Responsive Widget on your form should also take care of the mobile responsiveness.

    link: http://widgets.jotform.com/widget/mobile_responsive

    Mobile responsiveness is not working in Shopify website Image 1 Screenshot 20

     

    Hope this help. Please let us know if issue persist.

    Thanks.

     

     

  • Lumativ
    Replied on March 30, 2015 at 5:47 PM

    Thanks for the above info.. We have already gone through the "How to make forms mobile responsive" and have everything correct for this.  We have also just implemented the "Mobile Responsive Widget" and it made no difference unfortunately... 

    It seems to be an issue with iOS (Iphone specifically) mobile operating system.  Android looks to be handling it properly.  Would expect the mobile responsive widget to handle this but it doesn't seem to...

    Do you have any additional knowledge that could help get this fixed?  

    Thanks for the help!

  • raul
    Replied on March 30, 2015 at 6:01 PM

    Does the same thing happen when you view the form using its direct URL: http://www.jotform.us/form/50685996709172? It seems to work fine when I view it using an emulator.

    Mobile responsiveness is not working in Shopify website Image 1 Screenshot 20

    You may also try to use the method described here: http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/ to make the iframe work in a responsive way but controlled by your site.

    Let us know if this helps.
    Thanks.

  • Lumativ
    Replied on March 30, 2015 at 6:34 PM

    Yes - Looks like the direct form (outside of our site) works properly.  Narrowing it down to Shopify not respecting the responsive code.. 

    Will review and try out the Smashing Magazine post and let you know if it works or not.  Was hoping it wasn't this difficult.

    Thanks again!

  • jonathan
    Replied on March 30, 2015 at 6:35 PM

    Thank you for the update. Do let us know of the results and if further assistance is needed.

    Thanks.