What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
How to optimize the map size for mobile browsers?Asked by binanindita on December 30, 2016 at 05:54 AM
at the moment the embedded map is wider than safari / iphone
Hi, thank you for contacting us.
In order to optimize the map for both desktop and mobile browsers, please inject this custom CSS code:
width: 100% !important;
I created an animation to guide you through achieving that:
For a general tutorial on how to inject custom CSS code into a form, please see https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
If you need further assistance please let us know. We will be happy to help. Thank you.
Is it possible that my form is optimized for both mobile browser and
desktop browser screen width?
I need this form to work in both browsers, and especially on desktop it
needs big map
Thanks in advance, for the help
Your form should be responsive for both mobile and desktop view.
Are you having issues with your form's optimization with any of the devices (mobile or desktop)?
Can you help us by giving us more information, please?
Does the workaround using the CSS codes that my colleague, Aidan, have provided did not work or solve your issue?
We will wait for your response. Thank you.
Yes, the CSS code worked well for mobile browser. The map fills the width
of mobile browser's screen.
However, the desktop: the map width is not as wide as the browser screen.
See below. Can we make this map wider on desktop?
After creating a clone version of your form, I found out that you have added the CSS codes my colleague have provided under the CSS tab of the GPS Location Widget.
I would (also) suggest you inject the CSS codes to your form as instructed in the screenshot/guide that my colleague provided above.