Header logo is too small when viewed from mobile

  • Profile Image
    RhinebeckAnimalHospital
    Asked on October 20, 2017 at 01:46 PM

     

    Hello,

    So it appears that on mobile display our company's logo icon shrinks to an illegible size. Are there any ways around this? The current logo is set to display at 200px width.

    Thank you!

     

    1508521643jotform mobile.png

  • Profile Image
    Jim_R
    Answered on October 20, 2017 at 03:02 PM

    You're correct - To fix this, please try injecting the following CSS codes to your form builder:

    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {

      .form-header-group.hasImage > .header-logo {

        display: block;

        text-align: center;

      }

    }

    Result: https://www.jotform.com/72926092943969 

    Please use an actual mobile phone to test how it looks like.

  • Profile Image
    RhinebeckAnimalHospital
    Answered on October 20, 2017 at 04:43 PM
    Worked perfectly! Thank you! :)
    ...