Я пытаюсь увидеть, как выглядит страница на ноутбуке 1366x768.
В устройстве Inspect это выглядит отлично:
Но на самом ноутбуке это выглядит так:
Итак, далеко!: - / Это очень расстраивает, так как я работаю на большом экране, и я не могу проверять это на маленьком экране ноутбука каждую минуту.
Как получается, что страница отлично вписывается в устройство Chrome 1366x768, но ужасно смотрится на реальном экране 1366x768?
Любой совет, что может происходить?
CSS:
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
}
/* Control the right side */
.right {
right: 0;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
color:black;
max-width: 560px;
min-width: 500px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border-color: #eee;
border-width: 1px;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.Forgot-Password {
font-family: "Roboto";
font-size: 17px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
margin-top:15px;
text-align: center;
color: #555556;
}
.form button {
font-family: "Roboto", sans-serif;
outline: 0;
background:#009bf7;
width: 100%;
border: 0;
padding: 15px;
font-size: 17px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
color:white;
}
.form button:hover,.form button:active,.form button:focus {
background:#0c6ea7
}
.form button:disabled {
background: #dddddd;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
Разметка HTML:
<div class="split left">
<div class="centered">
<div style="margin-bottom:60px">
<img class="img-responsive" src="images/fineon.png" alt="Fineon"> </div>
<style>
.navbar {
display: none;
}
.navbar-primary {
display: none;
}
</style>
<div ng-controller="login-controller" ng-init="initLoginPage()">
<div align="center">{{message}}</div>
<form class="login-form form">
<p class="form-login-title" dir="{{pageInfo.direction}}">{{gs("signIn", "Sign in")}}</p>
<hr style="margin-right:370px;border: 1px solid black;" width="15%">
<div class="form-field">
<input dir="{{pageInfo.direction}}" type="text" name="first_name" id="first_name" required ng-model="user.email">
<label for="first_name">{{gs("emailAddress", "Email Address")}}</label>
</div>
<div class="form-field">
<input dir="{{pageInfo.direction}}" type="text" name="first_name" id="first_name" required ng-model="user.password">
<label for="first_name">{{gs("password", "Password")}}</label>
</div>
<button ng-disabled="crisperSessionId == undefined" dir="{{pageInfo.direction}}" ng-click="login()"
type="submit">{{gs("signInButton", "Sign in")}}</button>
<p class="Forgot-Password"><a class="Forgot-Password" href="#/loginForgot">Forgot my password</a></p>
</form>
</div>
</div>
<div class="split right ">
<div class="centered">
<h4 class="Fineon-Exchange">Fineon</h4> <br>
<p class="Export-Receivable-Finance-Marketplace" >Trade Finance & Marketplace</p>
<div style="width:70px; margin-top:50px">
<hr style="border: 1px solid white;">
</div>
</div>
</div>
</div>