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?