I'm trying to center my login and register panel on the screen. It looks good when viewed from a computer or using the inspect menu to simulate mobile devices. However, when I try to view it on my actual mobile device, this is what I see: image and this is how it appears in the inspect menu on the computer: image2
Here is the code I am using:
<div class="wrapper2" style="font-size: 24px;">
<h2>Login</h2>
<p style="padding-bottom: 30px;">Please fill out the following fields.</p>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
<label>Username/Email address</label>
<input type="text" name="username" class="form-control" value="<?php echo $username; ?>">
<span class="help-block" style="color: red;"><?php echo $username_err; ?></span>
</div>
<div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
<label>Password</label>
<input type="password" name="password" class="form-control">
<span class="help-block" style="color: red;"><?php echo $password_err; ?></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
</div>
<div class="plus" style="font-size: 18px;">
<p>Not registered yet? <a href="register.php">Register</a></p>
<p>Forgot your password? <a href="password-reminder.php">Password Reminder</a></p>
</div>
</form>
</div>
Here is the CSS:
.wrapper2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font: 18px sans-serif;
text-align: center;
}