Fix footer overlap #848

- Added footer responsive layout for tablets too
- Fixed footer ovelap on Laptop media screen
This commit is contained in:
pycat 2017-05-16 00:32:58 +03:00 committed by James Valleroy
parent 89ceb98273
commit 0e80bb9b02
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808
3 changed files with 21 additions and 8 deletions

View File

@ -75,6 +75,7 @@
</head>
<body>
<div id="wrapper">
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://mozilla.org/firefox">Upgrade to a modern version of Firefox</a> to experience this site.</p><![endif]-->
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container">
@ -167,7 +168,7 @@
</div>
</div>
<div class="container">
<div id="container-wrapper" class="container">
<div class="row">
{% block content_row %}
<div class="col-md-3">
@ -226,8 +227,8 @@
</div>
{% endblock %}
</div>
</footer>
</footer><!--/.footer-->
</div><!--/#container-->
<!-- JavaScript <script> tags are placed at the end of the document to speed up initial page loads-->
<!-- Local link to system Modernizr (includes HTML5 Shiv) -->
<script type="text/javascript" src="{% static '/javascript/modernizr/modernizr.min.js' %}"></script>

View File

@ -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{

View File

@ -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;
}