The Footer
This is a footer. It is displayed at bottom of page. It is a footer with 4 boxes. Three boxes in the 3 column format, then the fourth box is under those three boxes
which go all the way across page. The box model is used here for height on these boxes. You add up the height of the columns and the height of the 4th box under the 3 columns.
The 4th box spans 100% width of the page. The columns is 80px high and the 4th box is 55px high equaling 135px. So I made the footer 135px high and the container(#colcontainer)
the 4 boxes are in 135px high. You really don't need the #colcontainer there. You could just use the footer as the container. But if you want to add something there besides the
4 boxes, you can do so.
Then it will all stack up for the mobile. You can make it not display on the mobile screen if you want or you can modify the
footer to your liking. To make the footer not display on the mobile, add this to your mobile style sheet:
footer {
display:none;
}
Here is the HTML:
<footer>
<div id="colcontainer"> <!--footer columns start-->
<div class="fcolumns">
<a href="webpage.html">Link To Page</a><br>
<a href="webpage.html">Link To Page</a><br>
<a href="webpage.html">Link To Page</a><br>
<a href="webpage.html">Link To Page</a><br>
</div>
<div class="fcolumns2">
<br>
Thanks For Visiting!
</div>
<div class="fcolumns3">
<a href="webpage.html">Link To Page</a><br>
<a href="webpage.html">Link To Page</a><br>
<a href="webpage.html">Link To Page</a><br>
<a href="webpage.html">Link To Page</a><br>
</div>
<div id="lastbox">
Page Created by Contact me at
</div>
</div> <!--footer columns end-->
</footer>
Here is the CSS for your style sheet. The footer here is displayed at the bottom of this page.
The first part goes on your main style sheet and the bottom part goes on the mobile sheet. You must get rid of the footer that is
on those sheets and replace it with this footer.
footer {
height:135px;
box-sizing:border-box;
padding-top:0;
background-color:white;
background-image: linear-gradient(white, #4682b4);
}
#colcontainer {
box-sizing:border-box;
width:100%;
height:135px;
margin:0 auto;
}
.fcolumns {
box-sizing:border-box;
float:left;
width:30%;
height:80px;
font-size:.8rem;
color:black;
padding-top:15px;
padding-left:10%;
text-align:left;
border-right:solid 1px white;
}
.fcolumns2 {
box-sizing:border-box;
float:left;
width:40%;
height:80px;
font-size:.8rem;
color:black;
padding-top:15px;
padding-left:15%;
text-align:left;
border-right:solid 1px white;
}
.fcolumns3 {
box-sizing:border-box;
float:left;
width:30%;
height:80px;
font-size:.8rem;
color:black;
padding-top:15px;
padding-left:10%;
text-align:left;
}
#lastbox {
clear:left;
height:55px;
box-sizing:border-box;
font-size:.8rem;
color:black;
text-align:center;
padding-top:15px;
border-top:solid 1px white;
}
.fcolumns, .fcolumns2, .fcolumns3, a:link {
color:black;
text-decoration:none;
outline: none;
}
.fcolumns, .fcolumns2, .fcolumns3, a:visited {
color:black;
text-decoration:none;
outline: none;
}
.fcolumns, .fcolumns2, .fcolumns3, a:hover {
color:black;
text-decoration:none;
font-weight:bold;
outline: none;
}
.fcolumns, .fcolumns2, .fcolumns3, a:active {
color:black;
text-decoration:none;
outline: none;
}
This is the part that goes on the mobile sheet:
@media screen and (max-width: 999px) {
footer {
height:auto;
}
#colcontainer {
height:auto;
}
.fcolumns {
float:none;
width:100%;
text-align:center;
padding: 5px 0 5px 0;
height:auto;
}
.fcolumns2 {
float:none;
width:100%;
text-align:center;
padding: 5px 0 5px 0;
height:auto;
}
.fcolumns3 {
float:none;
width:100%;
text-align:center;
padding: 5px 0 5px 0;
height:auto;
}
#lastbox {
height:auto;
padding-bottom:15px;
}
}