CSS to hide fields on "Address Map Locator" widget

I'd appreciate help with the css I would need to use to hide latitude, longitude, province and country.

I only want address to show under the map.

The map doesn't show on a mobile device, is there a way around this?

Hi there,

You need to apply following CSS codes to the widget's "Custom CSS" tab.

Please, see it from the below:

Please, copy paste the following codes:

#inputLat-row, #inputLng-row, #inputProvince-row, #inputCountry-row{

display: none;

}

.table {

    top: -6px;

    position: absolute;

}

For further assistance, please do let us know.

Regards.

Than ks for your help, The map doesn't show on a mobile device, is there a way around this?

Alright, I see the problem now, I pushed the "Address" field above in order to monitor it on top; but it pushed the map above, so we need to remove the following CSS code. Then, everything will back to normal.

Please, erase the following rule:

.table {

    top: -6px;

    position: absolute;

}

Also, see the results from the below:

If you need any other assistance, please do let us know.

Regards.

its still too big for mobile phones, i have it on a test form at https://eu.jotform.com//?formID=61051753056349

Hi there,

To make it fit to the mobile devices' screens, you need to apply the following CSS rule. I noticed that before you asked and tried to find a solution for this. Now, this issue will be gone with the following code. However, you need to inject this code to the form's custom CSS section, not on the widget's tab.

iframe{

width: 100% !important;

}

After applying it, the results will look like the following (iPhone 5):

Thanks.

thanks, that's a great help.

Is there a way to make the address label smaller on a phone?

It's difficult to see the field where the address is entered.

Hi again,

Yes, it is also possible. I write a CSS code that only work on mobile resolutions, so the appearance on the desktop is not going to change. Again, you need to copy the following code to the widget's "Custom CSS" tab:

@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

.label-section {

    text-align: left;

    padding-top: 0px !important;

    min-width: 60px;

}

.legacy-theme .input-section input, .legacy-theme .input-section .twitter-typeahead input{

    width: 100%;

}

.table-cell {

    padding: 7px !important;

}

}

Also, you can see the results on mobile:

Thanks.