Chrome's inspect device is extremely inaccurate? - html

Question

I am trying to see how the page looks like on a 1366x768 laptop.
In Inspect device it looks perfectly fine:
But on the actual laptop, it looks like this:
So way off! :-/ It is very frustrating as I work on a big screen, and I cannot check it on the small laptop screen every minute.
How comes the page fits perfectly fine in the 1366x768's chrome device inspect but horribly on the actual 1366x768 screen?
Any tip what may be going on?
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;
}
The HTML markup:
<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>

Answer 1

Although I am not a hard core programer or any expert, but I think I know what might be wrong. The Inspect Element of your browser shows your page in a 1366x768 resolution. Whereas on the laptop, you are actually viewing the page in 1366-(top and bottom toolbars pixels) x 768-(scroll bar width pixels) resolution. So, the laptop has resolution of 1366x768 but actual displayable resolution is lesser than that and, in my opinion, is the problem.
Now you can either get the actual displayable resolution from the laptop and set as custom resolution in your chrome inspect tool or press f11 on your laptop to see the page in actual 1366x768 resolution.