Logo is stretched on Mobile view

Hi, I created a form and added our logo at the top, but it appears stretched when viewed on mobile. I'll provide the link below—could you check the current dimensions and see how it looks on your device? If it also appears distorted for you, please recommend the ideal size to ensure it displays correctly on mobile without compression or stretching. Thanks!

https://form.jotform.com/250896456962170

Hi Unravel_Admin,

Thanks for reaching out to Jotform Support. I cloned the form and I was able to replicate the issue. I opened the image link and the image resolution is 2000px width and 400px height. Please try creating an 800px width and 400px height image logo.

Here's a cloned form with a small image logo size that you can check and test on mobile. Reach out again if you need any other help.

Hello, we changed the dimensions of the logo as you requested and it is still stretched when looking at it on mobile. I found that it's stretched on vertical view but not landscape (horizontal).

Your recommendation did not fix the problem. What is the dimension that works for both horizontal and vertical without stretches. Thanks!

Hi Unravel_Admin,

Please share the mobile device you are using and we will try to check if we can inject custom CSS code to fix the auto image sizing issue. Also, please share a new screenshot of the issue after you update the image size of the form. We’ve got a guide here that’ll show you how to do that.

Here's what it looks like on my end:

Once we hear back from you, we'll be able to help you with this.

Yes I see yours is stretched as well on the vertical. Take note of the circle part of the logo. It looks more like an oval. I'm adding the two screenshots from my iPhone 16.

We would love it if you could add custom coding to this to alleviate the skewing. Thanks. How long do you think that will take?

Hi Unravel_Admin,

That helped me to understand what’s happening but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Hi Unravel_Admin,

Please check my cloned form with custom CSS code that adjusts the logo's height automatically on mobile devices. If that works for you, please add this custom CSS code to your main form:

.form-page-cover-image {

  height: auto !important;

}

Here's a screencast of my cloned form:

Give it a try and let us know if you need any other help.

Thank you. I checked the cloned form on mobile. It looks good.

As for the custom code, can you provide instructions on how to add this to the CSS code. OR better ... can you do it for me?

Hi Unravel_Admin,

Unfortunately, we cannot edit our user's form. However, I can guide you on how to add it to your form step by step.

• Open your form in the Form Builder

• Click the Form Designer icon.

• Go to the Styles tab. Scroll down, copy and paste the custom CSS code inside the Inject Custom CSS box.

Here's the custom CSS code again:

.form-page-cover-image {

  height: auto !important;

}

You can also check our complete guide on how to add custom CSS code to your form on this link. Give it a try and let us know if you need any help.

This has been resolved. Thank you!