Vertically align public layout to better fit small mobile screens

This commit is contained in:
jbtbnl 2014-04-10 00:33:55 +02:00
parent 5b8c7a01e9
commit b10bf72999
2 changed files with 23 additions and 7 deletions

View File

@ -327,7 +327,7 @@ input[type="submit"].enabled {
/* Some whitespace to the top */
#body-login #header {
padding-top: 100px;
padding-top: 10px;
}
/* Fix background gradient */
#body-login {
@ -637,6 +637,21 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
min-height: 100%;
margin: 0 auto -70px;
width: 300px;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
#body-login footer, #body-login .push {
height: 70px;

View File

@ -35,14 +35,15 @@
<body id="body-login">
<div class="wrapper"><!-- for sticky footer -->
<header><div id="header">
<div class="logo svg"></div>
<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
</div></header>
<?php print_unescaped($_['content']); ?>
<div class="v-align"><!-- vertically centred box -->
<header><div id="header">
<div class="logo svg"></div>
<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
</div></header>
<?php print_unescaped($_['content']); ?>
<div class="push"></div><!-- for sticky footer -->
</div>
</div>
<footer>