Logo at top of forms is skewed on mobile

  • Profile Image
    Max_Gordon
    Asked on February 03, 2021 at 01:14 AM

    I have uploaded a png file of my company logo at the top of several forms. The logo does not skew when viewed on the computer or on an iPad, but it does skew on an iPhone. Please advise if there is a solution to this issue.

  • Profile Image
    gerardw
    Answered on February 03, 2021 at 05:48 AM

    I tested one of your forms https://www.jotform.com/form/210107159511040 on an iPhone, but your logo is appearing correctly:

    1612349251_601a7f432e37b_Homeowner Conta

    If you are seeing differently, please let us know the form URL and also a screenshot of how you are seeing the logo as skewed.

    Here is how you can attach screenshots on this ticket: https://www.jotform.com/help/438-how-to-post-screenshots-to-our-support-forum

  • Profile Image
    Max_Gordon
    Answered on February 03, 2021 at 09:22 AM
    Hi,
    The logo you’re seeing is skewed. Those letters and the height of the icon
    are taller than designed. Here’s another screenshot of it skewed as well.
    ...
  • Profile Image
    Max_Gordon
    Answered on February 03, 2021 at 09:33 AM
    For reference - here’s what the logo should look like unskewed. Thanks!
    ...
  • Profile Image
    Zahra_S
    Answered on February 03, 2021 at 10:49 AM

    Hi there!

    We apologize for the inconvenience. Can you please follow this guide to share the screenshot of what the logo should look like? Unfortunately, email attachments are not supported on our forum, so we could not view the images you shared with us.

    We await your response.

  • Profile Image
    Max_Gordon
    Answered on February 03, 2021 at 12:58 PM

    Please see attached for what the logo should look like. 1612375081_601ae4293bf17_MyPM PNG Logo I

  • Profile Image
    EltonCris
    Answered on February 03, 2021 at 04:41 PM

    You can fix it by injecting the following CSS codes into your form.

    @media screen and (max-width:480px){
    .form-all {
     margin-top: 0 !important;
    }
    .formLogoWrapper {
     position: initial !important;
    }
    .formLogoImg {
     height: auto !important;
    }
    }

    Guide: How to Inject Custom CSS Codes

    Result:

    02042021_hLmxnJg69J.png

  • Profile Image
    Max_Gordon
    Answered on February 03, 2021 at 08:51 PM

    This made it so the logo background is within the "form area" so it has the same background color instead of being on top of the form. Please advise. 1612403471_601b530faf881_2F1F373B-6BD6-4

  • Profile Image
    gerardw
    Answered on February 03, 2021 at 10:14 PM

    Sorry, but I am unable to see this at my end when I checked your form on an iPhone. This is how I am seeing your form on my mobile device:

    1612408135_601b65476a466_Roof Inspection

    Please use the CSS code suggested by my colleague above on your Roof inspection proposal form and then check.

    Please also let us know on which device you are testing your form.

  • Profile Image
    Max_Gordon
    Answered on February 03, 2021 at 10:48 PM

    Hi! Thanks so much and sorry about that.

    I injected the code into the roof inspection proposal, so now I think you should be able to see what i'm talking about (what was in my screenshot). I'm using an iPhone.

  • Profile Image
    EltonCris
    Answered on February 04, 2021 at 12:24 AM

    We got what you mean, please update it with these CSS codes.

    @media screen and (max-width:480px){
    .formLogoImg {
     height: auto !important;
    }
    .form-all {
      margin-top: 114px !important;
    }
    .formLogoWrapper.Center {
      top: -104px;
      text-align: center;
    }
    }

    This should keep the logo in its place, not within the form. The code above will only correct the logo dimension on mobile. Example:

    02042021_PjxqKxComn.png

    Let us know how it goes. Thanks!

  • Profile Image
    Max_Gordon
    Answered on February 04, 2021 at 09:07 AM

    That worked! Thank you!!

  • Profile Image
    Max_Gordon
    Answered on February 04, 2021 at 09:11 AM
    That worked - thank you!!!

    *Max Gordon*
    Founder & CEO | MyPM
    phone: (248) 313-8809
    website: www.gomypm.com
    email: max@gomypm.com

    ...