Logo is not resizing to fit on a small screen such as a mobile phone

  • Profile Image
    eblingsserviceplus
    Asked on January 22, 2018 at 07:27 AM

    Can you help me with making the logo resize correctly to the size screen its being used on? Also wonder why the white box around the form content is against the edge of the screen on the left but has a gap on the right. Thank you!

  • Profile Image
    BJoanna
    Answered on January 22, 2018 at 11:17 AM

    Please add the following CSS codes to your form to resolve both issues:

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

    .form-all:before {

        background-size: 100% !important;

         top: -100px !important;

      .jotform-form .form-all {

        margin: 10px;

    }

    }

    How to Inject Custom CSS Codes

    1516637606form1.JPG

    Here is my demo: https://form.jotform.com/80214019746958 

    Feel free to test it and clone it

    Hope this helps to solve the issues. 

  • Profile Image
    eblingsserviceplus
    Answered on January 22, 2018 at 12:24 PM

    Thank you for the quick response! That did fix it for anything with a width of 480 or less. It still doesn't shrink the logo from 481 up to 720 and the form content box is still against the edge from 480 up to 767 (as seen from adjusting screen size with chrome developer tool). See example screenshots below.

    1516641820Jotform.PNG

    1516641837Jotform 2.PNG

  • Profile Image
    BJoanna
    Answered on January 22, 2018 at 12:41 PM

    Please add this CSS code to your form as well:

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

      .form-all:before {

        background-size: 100% !important;

    }

    Here is my new form: https://form.jotform.com/80214505346954 

    1516642649form.gif