Form cut on the right (widget I think)

  • Profile Image
    evank001
    Asked on February 06, 2018 at 01:37 PM

    Hi guys, 

    I gotta an issue with this form : 

    https://form.jotformeu.com/73310817188357

    When I put it on my website, on computer with 17" screen, no problem, but when it comes to 15" or worse 13", it is cut like below : 

    1517942099image.png

    Can you help me on that ? 
    Thanks guys

  • Profile Image
    Adrian
    Answered on February 06, 2018 at 03:16 PM

    I have added this custom CSS to your form.

    .form-all {

      max-width: 100%;

      box-sizing: border-box;

    }

    iframe {

      max-width: 100%;

    }

    and this to the widget

    li {

    max-width: calc(20% - 20px) !important;

    box-sizing: border-box;

    }

    img {

    max-width: 100% !important;

    }

    Here is how the form looks on a 13 inch screen:

    1517948151Fullscreen_2_6_18__9_15_PM.jpg


    Let us know if you need further help.

  • Profile Image
    evank001
    Answered on February 07, 2018 at 04:39 AM

    Thanks a lot for your help, it works on small computer screen but mess up the view on mobile phone (it worked perfectly on mobile before), have a look below : 

    1517996316Screenshot_20180207-103704.png

    Is there a way to adapt following the size of the screen ? 


  • Profile Image
    Adrian
    Answered on February 07, 2018 at 06:26 AM

    I put the CSS code of the widget inside a media query, so it does not affect smaller screens (mobiles).

    The form should look good on mobiles and desktops now.

    Let us know if you need further assistance.