From 0e80bb9b02d6bbf4d649bb235c99733764f34c97 Mon Sep 17 00:00:00 2001 From: pycat Date: Tue, 16 May 2017 00:32:58 +0300 Subject: [PATCH] Fix footer overlap #848 - Added footer responsive layout for tablets too - Fixed footer ovelap on Laptop media screen --- plinth/templates/base.html | 7 ++++--- static/themes/default/css/plinth.css | 20 ++++++++++++++++---- static/themes/default/css/responsive.css | 2 +- 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/plinth/templates/base.html b/plinth/templates/base.html index 9e71743e1..79d9b0fb7 100644 --- a/plinth/templates/base.html +++ b/plinth/templates/base.html @@ -75,6 +75,7 @@ +
-
+
{% block content_row %}
@@ -226,8 +227,8 @@
{% endblock %}
- - + +
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css index 2b1439b23..8c6106be4 100644 --- a/static/themes/default/css/plinth.css +++ b/static/themes/default/css/plinth.css @@ -1,5 +1,6 @@ body { padding-top: 70px; + position: relative; } .nav .glyphicon, @@ -86,17 +87,28 @@ footer .license-info { html { position: relative; - min-height: 100%; } -body { - /* Margin bottom by footer height */ - margin-bottom: 60px; + +body, html { + height: 100%; } + +#wrapper{ + min-height: 100%; + position: relative; +} + +#container-wrapper{ + /*covers for footer height */ + padding-bottom: 150px; +} + footer { text-align: center; position: absolute; bottom: 0; width: 100%; + height: 150px; } footer license-info p{ diff --git a/static/themes/default/css/responsive.css b/static/themes/default/css/responsive.css index ebcede839..51bbea017 100644 --- a/static/themes/default/css/responsive.css +++ b/static/themes/default/css/responsive.css @@ -2,7 +2,7 @@ /* Responsive queries */ /* Smartphone */ -@media screen and (max-width: 660px) { +@media only screen and (min-width: 320px) and (max-width: 768px) { footer{ position: relative; }