Why the form is not responsive when embedded in Wix?

  • makeshark
    Asked on August 7, 2017 at 1:13 PM

    How do I get the image radio buttons to stack and be 100% width on mobile (so the is not horizontal scrolling)?

  • John_Benson
    Replied on August 7, 2017 at 2:34 PM

    I checked the form URL that you have provided and I can see that it is mobile responsive. The width of the Image Radio button is 100% in iPhone 6s plus, here's the screenshot:

    Why the form is not responsive when embedded in Wix? Image 1 Screenshot 20

    If the issue persists, please provide a screenshot, the internet browser that you're using, and the device used. 

    If you're referring to another form, please provide the form ID or form link.

    Thank you.

  • makeshark
    Replied on August 17, 2017 at 3:41 PM

    Why the form is not responsive when embedded in Wix? Image 1 Screenshot 20

     

    On an iPhone 7+ using Safari

  • David JotForm Support Manager
    Replied on August 17, 2017 at 5:20 PM

    I just tried with an emulator, and it looks responsive in iPhone 7 plus using Safari:
    Why the form is not responsive when embedded in Wix? Image 1 Screenshot 20

    If by any chance you are view it from a webpage where you have embedded it, please share the URL of the page.

  • makeshark
    Replied on August 17, 2017 at 5:23 PM

    Okay... https://makeshark.wixsite.com/mesh-fitness/pricing

  • David JotForm Support Manager
    Replied on August 17, 2017 at 7:38 PM

    Please do the following adjustments:

    1) Inject the following code inside the webpage where you have embedded your form:

    <style type="text/css">

    @media only screen and (max-width: 480px) {

    #comp-j4ehby0k{

        left: 0px !important;

        width: 100% !important;

    }

    }

    </style>

    2) Then inject the following code inside the Image Picker CSS area: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

    @media only screen and (max-width: 480px) {

    div.imageContainer.blocks{

        width: 100% !important;

    }

    }

    This should be the result:

    Why the form is not responsive when embedded in Wix? Image 1 Screenshot 20

    Let us know if you need more help.

  • makeshark
    Replied on August 18, 2017 at 12:57 PM

    I have added the code to the first widget, but I'm not sure how you add CSS to Wix?

  • Nik_C
    Replied on August 18, 2017 at 1:35 PM

    I don't think it is possible to add CSS to Wix.

    I added some custom CSS code to your form:

    Why the form is not responsive when embedded in Wix? Image 1 Screenshot 20

    I tested on my iPhone 7 and it worked much better, but it should fit even better on 7+.

    Please check your website and let us know how it worked.

    Thank you!