Mobile responsiveness is not working in Shopify website

  • Profile Image
    Lumativ
    Asked on March 30, 2015 at 03: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!

  • Profile Image
    raul
    Answered on March 30, 2015 at 04:15 PM

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

    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.

  • Profile Image
    Lumativ
    Answered on March 30, 2015 at 04: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

  • Profile Image
    jonathan
    Answered on March 30, 2015 at 04: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

     

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

    Thanks.

     

     

  • Profile Image
    Lumativ
    Answered on March 30, 2015 at 05: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!

  • Profile Image
    raul
    Answered on March 30, 2015 at 06: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.

    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.

  • Profile Image
    Lumativ
    Answered on March 30, 2015 at 06: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!

  • Profile Image
    jonathan
    Answered on March 30, 2015 at 06:35 PM

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

    Thanks.