Embedded Form Cut on smaller screens

  • jijojose
    Asked on December 10, 2020 at 12:13 PM

    Hi,

    The form embedded on this page gets cut at the bottom on smaller screens, the form is perfect on desktop. I tried a couple of CSS tweaks but it's affecting my desktop form. Please help, thank you.

    Jotform Thread 2758952 Screenshot
  • David JotForm Support Manager
    Replied on December 10, 2020 at 1:43 PM

    Good day, please try injecting the following CSS code in the same web page where you have embedded your form, it will target mobile views only:

    <style type="text/css">
    @media only screen and (max-width: 480px) {
    .wpb_wrapper,.wpb_raw_code wpb_content_element .wpb_raw_html{
      height: 100% !important;
    }
    .uncont{
      min-height: 1200px !important;
    }
    #JotFormIFrame-203353477570053 {
      min-width: 100%;
      min-height: 750px;
      max-height: 100% !important;
      border: none;
      height: 1200px !important;
    }
    }
    </style>|

    Result:

    1607625756 5fd26c1ce2d82 mobile Screenshot 10

  • jijojose
    Replied on December 10, 2020 at 3:18 PM

    Hi, with a bit of tweaking this worked for me, thank you.

  • David JotForm Support Manager
    Replied on December 10, 2020 at 4:57 PM

    You are welcome. Feel free to open a new ticket if you have a new question.