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

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.

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.

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
...

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.