QRouland/qrouland.com
1
0
Fork 0
Code Pull Requests Releases Activity

Fix footer for mobile device

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
index.html
View File

@ -12,12 +12,11 @@
<link href="mdb/css/bootstrap.min.css" rel="stylesheet"> <link href="mdb/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap --> <!-- Material Design Bootstrap -->
<link href="mdb/css/mdb.min.css" rel="stylesheet"> <link href="mdb/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) --> <!-- Your custom styles -->
<link href="mdb/css/style.min.css" rel="stylesheet"> <link href="mdb/css/style.css" rel="stylesheet">
</head> </head>
<body> <body>
<!--Main Navigation--> <!--Main Navigation-->
<header> <header>
@ -42,13 +41,10 @@
<!-- Left --> <!-- Left -->
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item" id="about_menu"> <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>
<li class="nav-item" id="formexp_menu"> <li class="nav-item" id="formexp_menu">
<a class="nav-link waves-effect" href="javascript:page_selection('#formexp');">Formations &#x26; Expériences Professionnelles </a> <a class="nav-link waves-effect" href="javascript:page_selection('#formexp');">Expériences Professionnelles &#x26; Formations</a>
</li>
<li class="nav-item" id="exp_menu">
<a class="nav-link waves-effect" href="javascript:page_selection('#exp');"></a>
</li> </li>
<li class="nav-item" id="publications_menu"> <li class="nav-item" id="publications_menu">
<a class="nav-link waves-effect" href="javascript:page_selection('#publications');">Publications</a> <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> <a class="nav-link waves-effect" href="javascript:page_selection('#teachings');">Enseignements</a>
</li> </li>
<li class="nav-item" id="projects_menu"> <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> </li>
</ul> </ul>
</div> </div>
@ -69,6 +65,8 @@
</header> </header>
<!--Main Navigation--> <!--Main Navigation-->
<!--Wrapper layout-->
<div class="wrapper">
<!--Main layout--> <!--Main layout-->
<main class="mt-5 pt-5"> <main class="mt-5 pt-5">
@ -350,7 +348,7 @@
<div class="card-body text-white text-center py-5 px-5 my-5"> <div class="card-body text-white text-center py-5 px-5 my-5">
<h1 class="mb-4"> <h1 class="mb-4">
<strong>Projects Personnels</strong> <strong>Projects</strong>
<p class="text-center mb-5">Coming soon...</p> <p class="text-center mb-5">Coming soon...</p>
</h1> </h1>
</div> </div>
@ -364,8 +362,12 @@
</main> </main>
<!--Main layout--> <!--Main layout-->
<div class="push"></div>
</div>
<!--Wrapper layout-->
<!--Footer--> <!--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"> <hr class="my-2">

8
mdb/css/style.css
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 */
}