Logo at top of forms is skewed on mobile

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.

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

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

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.
...

For reference - here’s what the logo should look like unskewed. Thanks!
...

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.

Please see attached for what the logo should look like.

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:

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.

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:

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.

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.

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:

Let us know how it goes. Thanks!

That worked! Thank you!!

That worked - thank you!!!

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

...