Mobile Zooms in on Form Input

[stthomas]

Hey there!

I’ve got a form here: http://test.st-thomas.org.au/sermons/ [password to ‘coming soon’ is manchester] and when the user clicks on any of the dropdowns the page zooms in, but it doesn’t zoom back out when they’ve selected one.

Is there a way to ensure either that the page zooms back out once they’ve made their choice? Or failing that, to stop it zooming out?

Cheers,
Becky

[nico]

Hi @stthomas,

Thanks for writing in.

I could not be able to check what you want to achieve because I was not able to enter the password that you provided.

Would you mind sharing us an instruction or your admin credentials on how to view your setup.

Thanks.

[stthomas]

I’ve disabled the ‘under construction’ plugin for the time being so you should be able to see it now

[paul.r]

Hi,

It is probably because the browser is trying to zoom the area since the font size is less than the threshold, this generally happens in iphone.

Try to increase the font size for your select element.

select.form-control {
        font-size: 16px;
}

or create file _meta.php in wp-content/themes/pro-child/framework/views/global and copy the code below into that file.

<?php

// =============================================================================
// VIEWS/GLOBAL/_META.PHP
// -----------------------------------------------------------------------------
// Outputs meta data into the <head> of the site.
// =============================================================================

?>

<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title><?php wp_title( '' ); ?></title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

Hope that helps.

[stthomas]

beautiful, solved

[rad]

Glad to hear that! Cheers!