Collapse responsive issue

  • Profile Image
    hvanrensburg
    Asked on February 07, 2018 at 01:10 AM

    Hi Jotsupport, I'm having some hard time making the collapse of https://form.jotform.co/71202808086857 making responsive and full width on mobile landscape and portrait. Can you please check and change the code to fix it. The collapse should be full width as per screensize.


    Looking for support,

     Thanks

     1517983771ipad_portrait_mode_18020209513


  • Profile Image
    bulent
    Answered on February 07, 2018 at 03:33 AM

    Hi,

    Please add following css code into your form. If you don't know how to add  custom css, please follow this link.

    @media screen and (max-width: 480px){

        .jotform-form{

          padding: 0;

        }

        

        .form-all{

          width: 100% !important;

          padding: 0;

        }

        

        ul.form-section.page-section li {

          width: 100% !important;

        }

        

        ul.form-section.page-section li .form-collapse-table {

          width: calc(100% - 72px) !important;

        }


    }

    If you have any further questions, please let us know.

  • Profile Image
    hvanrensburg
    Answered on February 07, 2018 at 06:39 AM

    I noted on iPad (portrait mode) is still off center. iPhone (landscape mode) is off center. Otherwise is does look amazing.


    1518003274ipad_portrait__180207085824.jp

  • Profile Image
    bulent
    Answered on February 07, 2018 at 06:53 AM

    Hi,

    Could you please replace this line @media screen and (max-width: 480px){  with @media screen and (max-width: 1024px){ 

    If you need further assistance let us know.