I am working on login page. For desktop and laptop devices it looks all good. In mobile devices, it looks bit different in different mobile device. For example, on iPhone 12 Pro the design looks good but on iPhone XR it doesn't look good e.g. input fields moved to the left, input fields are smaller compared to screen size. I have the following css and html code:
.logo {
background: url('../images/logo_readpeak.png') no-repeat;
height: 109px;
width: 247px;
margin-bottom: 20px;
}
.bg {
background: linear-gradient(270deg, #00000000 60%, #000000ad 100%),
linear-gradient(90deg, #00000000 60%, #000000ad 100%),
url('../images/background_photo.jpeg') transparent 0% 0% no-repeat padding-box;
width: 100%;
min-height: 100vh;
background-position: center;
background-size: cover;
opacity: 1;
}
@media only screen and (min-width: 992px) {
.form-container {
margin-left: 33%;
margin-top: 23%;
}
.news-container {
margin-left: 14%;
margin-top: 23%;
max-width: 35em;
}
.input-width {
width: 350px;
}
.desktop-forget-password {
display: block !important;
}
}
@media only screen and (max-width: 990px) {
.mt-40 {
margin-top: 40px;
}
.mobile-forget-password {
display: block !important;
}
.input-container {
display: -ms-flexbox;
display: flex;
width: 100px;
}
.news-container {
margin-bottom: 30px;
}
.input-width {
width: 320px;
}
}
@media only screen and (max-width: 400px) {
.input-width {
width: 270px;
}
.new-login-form {
margin: 25px;
}
}
@media only screen and (min-width: 1800px) {
.mt-40 {
margin-top: 30%;
}
.form-container {
margin-left: 32%;
}
.news-container {
width: 570px;
margin-left: 183px;
}
.input-width {
width: 450px;
}
}
.form-label {
font: normal normal 20px/30px Raleway;
letter-spacing: 0px;
color: #ffffff;
opacity: 1;
}
.login-btn {
text-align: left;
font: normal normal medium 20px/24px Raleway;
letter-spacing: 0px;
color: #ffffff;
background-color: #599da6;
padding: 5px 20px 5px 20px;
border: none;
margin-top: 20px;
}
.login-btn:hover {
background-color: #599da6;
border: 1px solid white;
}
.ml-5 {
margin-left: 5px;
}
.input-container {
display: -ms-flexbox;
display: flex;
width: 100%;
min-width: 100%;
margin-bottom: 15px;
}
.no-border {
border: none;
outline: none;
border-radius: 0px;
}
.news-container {
background: #599da6 0% 0% no-repeat padding-box;
border-radius: 15px;
padding: 15px;
}
.news-heading {
font: normal normal bold 26px/35px Raleway;
letter-spacing: 0px;
color: #ffffff;
}
.news-tile-container {
padding: 15px 0px 15px 0px;
border-bottom: 1px solid white;
}
.news-title {
text-align: left;
font: normal normal normal 17px/24px Raleway;
letter-spacing: 0px;
color: #ffffff;
}
.news-link {
text-decoration: none;
font: normal normal normal 17px/24px Raleway;
letter-spacing: 0px;
color: #ffffff;
}
.forgot-password-container {
position: absolute;
bottom: 45px;
left: 45px;
}
.icon {
padding: 10px;
background: white;
color: gray;
min-width: 35px;
text-align: center;
}
.forget-password-h {
font: normal normal bold 22px/24px Raleway;
letter-spacing: 0px;
color: #589da6;
}
.forget-password-p {
color: white;
text-align: left;
font: normal normal normal 18px/24px Raleway;
letter-spacing: 0px;
margin-top: 20px;
}
.forget-password-l {
color: #589da6;
text-decoration: none;
font: normal normal bold 20px/24px Raleway;
}
.desktop-forget-password {
display: none;
}
.mobile-forget-password {
display: none;
margin-top: 45px;
margin-left: 25px;
margin-right: 25px;
}
@media all and (max-height: 600px) {
.bg {
min-height: 100%;
}
}<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&family=Raleway:ital,wght@0,300;0,800;1,200&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/newlogin.css">
<title>Login Page</title>
<style>
</style>
</head>
<body class="bg">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 col-size">
<!-- FORM START HERE -->
<?php echo $this->Form->create('User', array(
'url' => array('controller' => 'users', 'action' => 'newlogin'), 'method' => 'POST', 'class' => 'new-login-form form-container mt-40',
'id' => 'new-login-form'
)); ?>
<div class="logo"></div>
<?php if (isset($error) && $error == "wrong,"): ?>
<div class="alert alert-danger <?php if (empty($error)): ?>display-hide<?php endif; ?>">
<button class="close" data-close="alert"></button>
<span>Incorrect username or password. Please use your email address as the username</span>
</div>
<?php endif; ?>
<div class="form-group input-thing">
<label for="exampleInputEmail1" class="form-label">Work Email Address</label>
<div class="input-container">
<i class="fa fa-user icon"></i>
<?php echo $this->Form->input('username', array('label' => '', 'class'=>"form-control input-width no-border input-new-login pull-left", 'type' => 'text', 'placeholder' => 'E-Mail Address')); ?>
<!--<input type="email" class="form-control input-width no-border" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">-->
</div>
</div>
<div class="form-group input-thing">
<label for="exampleInputPassword1" class="form-label">Password</label>
<div class="input-container">
<i class="fa fa-lock icon" aria-hidden="true"></i>
<?php echo $this->Form->input('password', array('label' => '', 'class'=>"form-control input-width no-border input-new-login pull-left", 'type' => 'text', 'type' => 'password', 'placeholder' => 'Password')); ?>
<!--<input type="password" class="form-control input-width no-border" id="exampleInputPassword1" placeholder="Password">-->
</div>
</div>
<button type="submit" class="btn btn-primary login-btn">LOGIN <span class="ml-5"><i class="fa fa-sign-in" aria-hidden="true"></i></span></button>
<?php echo $this->Form->end(); ?>
<!-- FORM END HERE -->
<div class="mobile-forget-password">
<p href="/users/passwordRecovery" class="forget-password-h">Forgot Password?</p>
<div>
<p class="forget-password-p">Don’t have a Readpeak account yet?</p>
<a href="/signup" class="forget-password-l">Create one here</a>
</div>
</div>
</div>
<!-- <div class="col-md-2 col-sm-2 col-xs-12"></div> -->
<div class="col-md-6 col-sm-6 col-xs-12 col-size">
<div class="news-container mt-40">
<iframe src="https://app.readpeak.com/ads/get/?l=579f889b0cd477a5" id="mcn_iframe_579f889b0cd477a5-1" style="width: 100%; max-width: 600px; height: 400px; border: none;" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</div>
<div class="forgot-password-container desktop-forget-password">
<a href="/users/passwordRecovery" class="forget-password-h">Forgot Password?</a>
<div>
<p class="forget-password-p">Don’t have a Readpeak account yet?</p>
<a href="/signup" class="forget-password-l">Create one here</a>
</div>
</div>
</div>
</body>
</html>For iPhone 12 Pro it look like this which is Alright. The input fields, forgot password, news & update are in the same align.
For iPhone XR it look like following image which is not alright. The input fields, forgot password, news & update texts are not in the same align.
Could anyone tell me how can I fix it so that look like same design in all mobile devices how it look like in iPhone 12 Pro? I am stuck on this for a long time. Please help me out.