On the application, a Bootstrap logon form is created but on mobile devices, the logon form appears too small and centered with a lot of white space. This makes it difficult for users to enter their name and password.
Is there a way to fix this so that the login form appears native on mobile phones? Or perhaps there is a template that can be used to create a more user-friendly logon form across different screen resolutions?
<!DOCTYPE html>
<html>
<head>
<link href="/admin/css/redmond/jquery-ui.css" rel="stylesheet" />
<link href="/admin/Content/font-awesome.min.css" rel="stylesheet" />
<link href="/admin/Content/bootstrap.css" rel="stylesheet" />
<link href="/admin/Content/bootstrap-theme.css" rel="stylesheet" />
<title>
Login
</title>
<script src="/admin/Scripts/jquery-1.11.2.js"></script>
<script src="/admin/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/admin/Scripts/bootstrap.js"></script>
</head>
<body>
<div class='login-box container'>
<form action="/admin/Account/LogOn" method="post">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<label for="user">User</label>
<input autofocus="1" class="form-control" id="user" maxlength="10" name="UserName" placeholder="User" required="True" style="width:auto" type="text" value="" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" id="password" name="Password" placeholder="Password" required="True" style="width:auto" type="password" />
</div>
<div class="checkbox">
<label>
<input id="RememberMe" name="RememberMe" type="checkbox" value="true" />
<input name="RememberMe" type="hidden" value="false" /> Remember me
</label>
</div>
</fieldset>
<input type="submit" value='Logon' class="btn btn-primary" />
</form>
</div>
<script type="text/javascript">
$(function() {
$("input:text:visible:first").focus();
});
</script>
</body>
</html>
This setup uses HTML5, Bootstrap 3, jQuery, jQuery UI, ASP.NET MVC 4, and Razor.