I'm currently testing how the page appears on a 1366x768 laptop.
When inspected in the device, it looks perfect:
https://i.sstatic.net/OECnx.png
However, on the actual laptop screen, it's completely off:
https://i.sstatic.net/chaeY.png
It's so frustrating because I mainly work on a large screen and can't constantly check the small laptop display.
Why does the page fit perfectly in the Chrome device inspect for 1366x768 but not on the real 1366x768 screen?
Any ideas on what might be causing this?
CSS:
/* Splitting the screen into halves */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
}
.right {
right: 0;
}
.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);
}
HTML Markup:
<div class="split left">
<div class="centered">
<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>
</div>