So I’ve grabbed a copy of your login demo (https://demo.mobiscroll.com/jquery/forms/login#) and modified some of the css so that the inputs don’t stretch all the way across on bigger screens, but I also want the form to center vertically on the page.
Basically the problem is if I load this page on my phone and rotate my phone into landscape mode, the sign in button is out of view and I can’t even scroll down to see it. It’s just hidden. What’s the reason that it’s designed this way? And how can I override it?
My first strategy was to make the form 100% high and then vertically align the form within it. So the form now indeed fills 100% of the height but the div that holds the form inputs I just can not get it to vertically center within that form. It’s stuck to the top of the screen for some reason.
Here’s what my html looks like now
<div mbsc-page class="demo-login" style='height:100%'>
<form class="md-login-form" mbsc-form style='height:100%'>
<div style='max-width:400px;margin:0 auto'>
<div class="md-logo micons icon-mbsc-logo"><img src='images/logo.wide.png'></div>
<div class="mbsc-form-group-inset">
<label>
<input mbsc-input id="email" type="email" name="email" placeholder="Email" />
</label>
<label>
<input mbsc-input name="password" type="text" placeholder="Password" data-password-toggle="true" data-icon="none" data-icon-align="right" />
</label>
</div>
<div class="mbsc-form-group-inset mbsc-padding mbsc-align-center">
<a href="#" class="md-signup">Don't have an account yet? Sign up.</a>
<br><br>
<a href="#" class="md-login">Forgot password?</a>
</div>
<div class="mbsc-form-group-inset mbsc-padding">
<button mbsc-button class="mbsc-btn-block md-signup-btn" type="submit">Sign in</button>
</div>
</div>
</form>
</div>
What’s happening that this form refuses to center?