How to get logo/Header area to be mobile-responsive

  • Ausome
    Asked on December 7, 2017 at 10:46 AM

    Hi, love JotForm! I've made headers for my form which I'd like to appear on mobile as well, but they're getting cut off on mobile.


    Is there a mobile safe zone, or how do you recommend I work around this?


    thanks,

    Julia Albert

    Jotform Thread 1317041 Screenshot
    Page URL: https://www.jotform.com/Ausome/VolunteerApplicationForm
  • Richie JotForm Support
    Replied on December 7, 2017 at 11:19 AM

    Hi,

    You can add this css code to resize your header to fit to mobile.

    @media (max-width:600px) and (min-width:481px){
      .form-all:before{
         background-size : 83% 100% !important;
      }
    }
    @media(max-width:480px){
      .form-all:before{
       
      background-size : 100% 100% !important;
      }
    }

    Here is a guide on how to insert custom css in to your form :

    How-to-Inject-Custom-CSS-Codes