Collapse responsive issue

  • hvanrensburg
    Asked on February 7, 2018 at 1: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 Screenshot 10


    Page URL: https://form.jotform.co/71202808086857
  • bulent
    Replied on February 7, 2018 at 3: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.

  • hvanrensburg
    Replied on February 7, 2018 at 6: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 Screenshot 10

  • bulent
    Replied on February 7, 2018 at 6: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.