Embedded Form Cut on smaller screens

  • Profile Image
    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.

  • Profile Image
    BDAVID
    Answered on December 10, 2020 at 01: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.png

  • Profile Image
    jijojose
    Answered on December 10, 2020 at 03:18 PM

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

  • Profile Image
    BDAVID
    Answered on December 10, 2020 at 04:57 PM

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