Fix footer for mobile device

This commit is contained in:
Quentin Rouland 2019-09-05 19:05:17 +02:00
parent 87e3ecd73c
commit 87af21c39e
2 changed files with 22 additions and 12 deletions

View File

@ -12,12 +12,11 @@
<link href="mdb/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="mdb/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="mdb/css/style.min.css" rel="stylesheet">
<!-- Your custom styles -->
<link href="mdb/css/style.css" rel="stylesheet">
</head>
<body>
<!--Main Navigation-->
<header>
@ -42,13 +41,10 @@
<!-- Left -->
<ul class="navbar-nav mr-auto">
<li class="nav-item" id="about_menu">
<a class="nav-link waves-effect" href="javascript:page_selection('#about');">About Me</a>
<a class="nav-link waves-effect" href="javascript:page_selection('#about');">A propos de moi</a>
</li>
<li class="nav-item" id="formexp_menu">
<a class="nav-link waves-effect" href="javascript:page_selection('#formexp');">Formations &#x26; Expériences Professionnelles </a>
</li>
<li class="nav-item" id="exp_menu">
<a class="nav-link waves-effect" href="javascript:page_selection('#exp');"></a>
<a class="nav-link waves-effect" href="javascript:page_selection('#formexp');">Expériences Professionnelles &#x26; Formations</a>
</li>
<li class="nav-item" id="publications_menu">
<a class="nav-link waves-effect" href="javascript:page_selection('#publications');">Publications</a>
@ -57,7 +53,7 @@
<a class="nav-link waves-effect" href="javascript:page_selection('#teachings');">Enseignements</a>
</li>
<li class="nav-item" id="projects_menu">
<a class="nav-link waves-effect" href="javascript:page_selection('#projects');">Projects Personnels</a>
<a class="nav-link waves-effect" href="javascript:page_selection('#projects');">Projects</a>
</li>
</ul>
</div>
@ -69,6 +65,8 @@
</header>
<!--Main Navigation-->
<!--Wrapper layout-->
<div class="wrapper">
<!--Main layout-->
<main class="mt-5 pt-5">
@ -350,7 +348,7 @@
<div class="card-body text-white text-center py-5 px-5 my-5">
<h1 class="mb-4">
<strong>Projects Personnels</strong>
<strong>Projects</strong>
<p class="text-center mb-5">Coming soon...</p>
</h1>
</div>
@ -364,8 +362,12 @@
</main>
<!--Main layout-->
<div class="push"></div>
</div>
<!--Wrapper layout-->
<!--Footer-->
<footer class="page-footer text-center font-small mdb-color darken-2 mt-4 wow fadeIn fixed-bottom">
<footer class="page-footer footer text-center font-small mdb-color darken-2 mt-4 wow fadeIn fixed-bottom">
<hr class="my-2">
@ -390,7 +392,7 @@
<!-- Social icons -->
<!--Copyright-->
<div class="footer-copyright py-2 ">
<div class="footer-copyright py-2 ">
<a href="https://qrouland.com" target="_blank"> qrouland.com </a>
</div>
<!--/.Copyright-->

View File

@ -0,0 +1,8 @@
.wrapper {
min-height: 100%;
height: 100%;
margin: 100 auto -120px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 120px; /* .push must be the same height as .footer */
}