The Mobile Responsive Widget is not helping my form be mobile friendly - can you help?

  • Profile Image
    Jdelrossi
    Asked on May 25, 2016 at 12:41 PM

    I dragged the mobile responsive widget to the top of my form..In preview, the form looks great on tablet, laptop, desk top but on mobile the heading and comment boxes are cut off.  The rest of the form displays nicely.

  • Profile Image
    Charlie
    Answered on May 25, 2016 at 02:24 PM

    As mentioned in this guide: https://www.jotform.com/answers/846510, where you have also posted almost the same concern, please also try enabling the mobile responsive option in your Form Designer Tool, here's a guide about it: https://www.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm 

    Here's my cloned form with the changes I made: https://form.jotform.com/61455613741959. You can clone it to your account to have a copy of it. Here's how to clone it: https://www.jotform.com/help/42-How-to-clone-an-existing-form-from-a-URL. For the comment and the header image, try adding this custom CSS code below:

    @media screen and (max-width: 600px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 768px) and (orientation: landscape) {

    #cid_1 > div {

        display: inline-block !important;

        width: 100% !important;

        height: auto !important;

    }

     

    #cid_1 > div > div {

        display: block !important;

    }

     

    #cid_1 > div > div > div.header-logo {

        display: block !important;

        width: 100% !important;

    }

     

    #cid_1 > div > div > div.header-text.httac.htvam {

        display: block !important;

        width: 100% !important;

        height: auto !important;

    }

    #cid_1 > div > div > div.header-logo > img {

        display: block !important;

        width: 100% !important;

        height: auto !important;

    }

     

    /*Make the text area to get 100% of width*/

    #cid_40 > div:nth-child(1), #cid_40 > div:nth-child(2) {

        width: 100% !important;

    }

     

    }

    Paste it under the CSS tab in your Form Designer Tool.

     

    I presume you don't want the header image to shrink in mobile device? In my case, what I did is to move the text beside it at the bottom of the image header when the screen size is small. Just like this:

     

    Let us know if that works.

  • Profile Image
    Jdelrossi
    Answered on May 25, 2016 at 03:45 PM

    Thanks you - I copied your CSS code and the form looks great in preview. I appreciate your help!
    Justine M. Del Rossi
    Vacation Specialist/Franchise Owner
    Sewell, NJ
    T:1-844-2SETSAIL
    T:(856) 270-6405
    F:(856) 283-0061
    E:[ jdelrossi@cruiseone.com ]( mailto:jdelrossi@cruiseone.com )
    [ Sign Up for Exclusive Offers & Promotions ]( http://jdelrossi.cruiseone.com/travel/cruises/Editorial.html?edType=Custom+Page&pagename=emailOffers )
    [ ]( http://jdelrossi.cruiseone.com/travel/HomePage.html )
    Website:
    [ http://www.setsailworldwide.com ]( http://www.setsailworldwide.com )
    Family Cruises:
    [ http://www.setsailfamily.com ]( http://www.setsailfamily.com/ )
    Luxury Cruises:
    [ http://www.setsailvip.com ]( http://www.setsailvip.com/ )
    [ ]( http://jdelrossi.cruiseone.com/travel/cruises/Editorial.html?edType=Custom+Page&pagename=More_Information_CruiseOne )
    Each CruiseOne Franchise is independently Owned and Operated
    ...
  • Profile Image
    Charlie
    Answered on May 25, 2016 at 03:48 PM

    I'm glad to hear that the custom CSS code worked.

    Should you need further assistance on this, please do let us know.

    Thank you.