mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-03 23:00:14 -05:00
Fixes login box being off centred on small screens
Accounted for top offset to keep login container centred. Login container fades in on load. Tested on a variety of window sizes and appears to be centred on all of them (measured it to make sure).
This commit is contained in:
parent
94c8c94ad1
commit
de09e7d19c
2 changed files with 5 additions and 4 deletions
|
@ -23,8 +23,8 @@
|
||||||
$(window).resize(function () {
|
$(window).resize(function () {
|
||||||
|
|
||||||
var loginContainer = $(".js-login-container"),
|
var loginContainer = $(".js-login-container"),
|
||||||
marginTop = Math.round(($(window).height() / 2) - loginContainer.outerHeight());
|
marginTop = Math.floor((loginContainer.parent().height() - loginContainer.height()) / 2) - 15;
|
||||||
loginContainer.css('margin-top', marginTop);
|
loginContainer.css('margin-top', marginTop).fadeIn(400);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -26,8 +26,9 @@
|
||||||
|
|
||||||
.login-box {
|
.login-box {
|
||||||
max-width: 530px;
|
max-width: 530px;
|
||||||
margin: 240px auto; // TODO: Change this to proper vertical centering with JS
|
margin: 0 auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
display: none;
|
||||||
|
|
||||||
@include breakpoint(630px) {
|
@include breakpoint(630px) {
|
||||||
max-width: 264px;
|
max-width: 264px;
|
||||||
|
|
Loading…
Add table
Reference in a new issue