Forms: Why is my logo showing distorted in the form mobile view?

In the preview when in mobile view, my logo is distorted. All other views are normal. How do I fix this?

Hi Danita,

Thank you for reaching out to Jotform Support. About the issue with your logo appearing distorted in the mobile view preview of your form. The distortion usually happens because the logo image does not fit well within the mobile view's dimensions or aspect ratio. When I viewed this on a device, I was not able to replicate the issue:

Can you try to view it directly on a device and check if in case the browser used is zoomed?

Give it a try and let us know how it goes.

Hi there, Thank you for responding so quickly. I tried opening it in the browser and adjusting the zoom. That didn’t work. I opened it through a different browser (Safari) and I have the same problem. I asked my kids to try open it on their phones and it is also distorted on their phones as well. See attached screenshots. What do you suggest from here? Thank you. Danita HicksonSent from my iPhoneConfidentiality Notice - The information in this email, inclusive of attached documents, is confidential and is intended solely for the named recipient(s). The information may be legally privileged and if you are not the intended recipient be advised that any use, disclosure, copying, forwarding or distribution of this email is strictly prohibited. If you have received this email in error, please notify the sender immediately and then delete this message including any attachments.On Jun 24, 2025, at 4:18 PM, Jotform <noreply@jotform.com> wrote:




...

Hello Danita,

The screenshots you shared has not been attached to your previous reply. Can you share it with us again so we can check what is happening? Let me show you how to post a screenshot to our Help Center:

1. On the Help Center page, scroll down to the Your Answer section and click on the Image icon.

2. Drag and drop your image into the Upload box, or click on it and select your file.

3. Then, click on the Add button in the bottom-right corner of the window.

4. To resize it, click on your screenshot and then click on one of the boxes in the corners, and drag it inward.

5. Once you're finished, click on the Post Answer button at the bottom right of the Your Answer section.

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

Here are the screenshots. 😊

Hi Danita,

Thank you for sharing the screenshots showing the distorted logo issue on mobile devices. Based on what you've described and the images you provided, here are some steps you can take to resolve the problem:

1. Check your logo image dimensions and aspect ratio. Ensure your logo has a balanced width-to-height ratio and is optimized for mobile viewing. A logo that is too wide or too tall can appear distorted on smaller screens.
2. Resize or crop your logo image. Before uploading, try resizing your logo to a smaller, more square-like dimension that fits better within mobile screen constraints.
3. Upload the optimized logo in Form Builder. Go to your form's builder, click on the logo area, and upload the resized logo image.
4. Preview on actual mobile devices. After uploading, preview your form on different mobile devices to confirm the logo displays correctly without distortion.
5. Consider using a transparent background logo. This often helps with better display across different backgrounds and devices.

Give it a try and let us know how it goes.

Hi @HicksonDanita! 👋

That usually happens because the logo image doesn’t have a fixed width/height ratio, so when Jotform’s mobile responsive view kicks in, it tries to stretch it to fit.

✅ Quick fix:

Try adding this to your form’s CSS under Form Designer > Styles > Inject Custom CSS:

img.form-logo {

max-width: 200px;

height: auto;

}

Adjust the max-width as needed. This keeps your logo scaling proportionally on smaller screens.

We ran into a similar issue recently while setting up forms for a local service website (AIO Home Services its for ) — small CSS tweaks made a huge difference for mobile users.

Hope this helps! Let me know if you want a hand tailoring the CSS to your logo’s exact size. 👍