How to optimize the map size for mobile browsers?

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:

#customFieldFrame_3 {

    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

I also created a corrected form in case you would like to clone it: https://form.jotform.com/63642284918969

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?
[image: pasted1]
...

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

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Thank you.