Wrap logo on small screens

cas_server/static/cas_server/login.css

@@ -4,12 +4,6 @@ body {
   background-color: #eee;
 }
 
-/*.form-signin {
-  max-width: 330px;
-  padding: 15px;
-  margin: 0 auto;
-}
-*/
 .form-signin .form-signin-heading,
 .form-signin .checkbox {
   margin-bottom: 10px;
@@ -47,3 +41,16 @@ body {
      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;
+    }
+}

cas_server/templates/cas_server/base.html

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