Wrap logo on small screens

This commit is contained in:
Valentin Samir 2016-06-21 18:02:27 +02:00
parent fc4c7ca664
commit b96c0ef4c7
2 changed files with 18 additions and 13 deletions

View File

@ -4,12 +4,6 @@ body {
background-color: #eee; background-color: #eee;
} }
/*.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
*/
.form-signin .form-signin-heading, .form-signin .form-signin-heading,
.form-signin .checkbox { .form-signin .checkbox {
margin-bottom: 10px; margin-bottom: 10px;
@ -47,3 +41,16 @@ body {
width:110px; width:110px;
} }
@media screen and (max-width: 680px) {
#app-name {
margin: 0px;
}
#app-name img {
display: block;
margin: auto;
}
body {
padding-top: 0px;
padding-bottom: 0px;
}
}

View File

@ -13,22 +13,20 @@
{% block bootstrap3_content %} {% block bootstrap3_content %}
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-2"></div> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-md-8">
<h1 id="app-name"> <h1 id="app-name">
{% if settings.CAS_LOGO_URL %}<img src="{{settings.CAS_LOGO_URL}}"></img> {% endif %} {% if settings.CAS_LOGO_URL %}<img src="{{settings.CAS_LOGO_URL}}"></img> {% endif %}
{% trans "Central Authentication Service" %}</h1> {% trans "Central Authentication Service" %}</h1>
</div> </div>
<div class="col-md-2"></div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-3"></div> <div class="col-lg-3 col-md-3 col-sm-2 col-xs-12"></div>
<div class="col-md-6"> <div class="col-lg-6 col-md-6 col-sm-8 col-xs-12">
{% bootstrap_messages %} {% bootstrap_messages %}
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</div> </div>
<div class="col-md-3"></div> <div class="col-lg-3 col-md-3 col-sm-2 col-xs-0"></div>
</div> </div>
</div> <!-- /container --> </div> <!-- /container -->
{% endblock %} {% endblock %}