Simple Responsive Footer

Responsive footer with company logo, navigation links, social links and copyright message

The footer is an element that appears on every page of the site, so designing it should be as important as designing the header. There are certain types of information that users are used to finding in the footer like copyright, terms of use, privacy policy, contact information, sitemap, additional navigation links and others. When designing a footer, you should take these expectations into account.

Simple Responsive Footer is an example of a footer that includes everything mentioned above. It is mobile-first, based on a responsive grid, uses font icons and is easily adjustable to fit your needs.

How it was made

In order to arrange information into columns, the Simple HTML5/CSS3 Grid System was used. The top section of the footer is split into three equal columns. The logo and company information takes up the first column, company links and services take up the second column, and social links take up the third column. For these columns, the <div> element was used with class=”col-phone-100 col-tablet-50 col-desktop-33”. From the class, we can understand that these columns will take up 100% of the mobile screen width, ½ of the tablet screen width, and ⅓ of the desktop screen width. The bottom area of the footer is taken up by the copyright message and legal links.

The footer is fully fluid and is only limited by the max-width of 1200px CSS declaration.

Check the sandbox below for the real-life example.

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="container">
<div class="footer">
<div class="row">
<div class="footer-col col-phone-100 col-tablet-50 col-desktop-33">
<div class="logo">Company.</div>
<div class="address">
1987 Street Ave, Area </br>
Company Ltd. tel. 371 555-788-222
</div>
</div>

<div class="footer-col col-phone-100 col-tablet-50 col-desktop-33">
<div class="row">
<div class="col-phone-50">
<h4>Company</h4>
<ul class="footer-links">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-phone-50">
<h4>Services</h4>
<ul class="footer-links">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>
</div>
</div>

<div class="footer-col col-phone-100 col-tablet-100 col-desktop-33">
<h4>Social</h4>
<div class="social-links">
<a class="social-link" href="#"><i class="icon-facebook"></i></a>
<a class="social-link" href="#"><i class="icon-twitter"></i></a>
<a class="social-link" href="#"><i class="icon-instagram"></i></a>
<a class="social-link" href="#"><i class="icon-google-plus"></i></a>
<a class="social-link" href="#"><i class="icon-youtube-play"></i></a>
</div>
</div>
</div>
<div class="legal">
<div class="legal-links"><a href="#">Terms of Use</a> / <a href="#">Privacy Policy</a> / <a href="#">Sitemap</a></div>
<div class="copyright-message">Copyrights © 2017 Company Ltd. All Rights Reserved.</div>
</div>
</div>
</div>
HTML
@charset "UTF-8";

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Font import */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

/* Icon Font */

@font-face {
font-family: "sample-font";
src:url("fonts/sample-font.eot?sdgf");
src:url("fonts/sample-font.eot?#iefix") format("embedded-opentype"),
url("fonts/sample-font.woff?gdf") format("woff"),
url("fonts/sample-font.ttf?dfg") format("truetype"),
url("fonts/sample-font.svg#sample-font") format("svg");
font-weight: normal;
font-style: normal;

}

[data-icon]:before {
font-family: "sample-font" !important;
content: attr(data-icon);
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
vertical-align: middle;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "sample-font" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
content: "\63";
}

.icon-twitter:before {
content: "\64";
}

.icon-instagram:before {
content: "\65";
}

.icon-call-phone:before {
content: "\6a";
}

.icon-google-plus:before {
content: "\6b";
}

.icon-youtube-play:before {
content: "\6c";
}

/* Layout */

body {
font-family: Montserrat, sans-serif;
color: #666;
font-size: 14px;
line-height: 18px;
font-family: 'Montserrat', sans-serif;
background: #ededed;
}

.container {
padding: 0 30px;
max-width: 1200px;
margin:0 auto;
}

/* Grid Code Start */
.row {
margin-right: -15px;
margin-left: -15px;
}

.row:before,
.row:after {
display: table;
content: " ";
clear:both
}

.col-phone-10 {width: 10%}
.col-phone-20 {width: 20%}
.col-phone-25 {width: 25%}
.col-phone-33 {width: 33.3333%}
.col-phone-50 {width: 50%}
.col-phone-67 {width: 66.6666%}
.col-phone-75 {width: 75%}
.col-phone-80 {width: 80%}
.col-phone-90 {width: 90%}
.col-phone-100 {width: 100%}

.col-phone-10,
.col-phone-20,
.col-phone-25,
.col-phone-33,
.col-phone-50,
.col-phone-67,
.col-phone-75,
.col-phone-80,
.col-phone-90,
.col-phone-100 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}

@media (min-width: 768px) {
.col-tablet-10 {width: 10%}
.col-tablet-20 {width: 20%}
.col-tablet-25 {width: 25%}
.col-tablet-33 {width: 33.3333%}
.col-tablet-50 {width: 50%}
.col-tablet-67 {width: 66.6666%}
.col-tablet-75 {width: 75%}
.col-tablet-80 {width: 80%}
.col-tablet-90 {width: 90%}

.col-tablet-10,
.col-tablet-20,
.col-tablet-25,
.col-tablet-33,
.col-tablet-50,
.col-tablet-67,
.col-tablet-75,
.col-tablet-80,
.col-tablet-90 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}
}

@media (min-width: 992px) {
.col-desktop-10 {width: 10%}
.col-desktop-20 {width: 20%}
.col-desktop-25 {width: 25%}
.col-desktop-33 {width: 33.3333%}
.col-desktop-50 {width: 50%}
.col-desktop-67 {width: 66.6666%}
.col-desktop-75 {width: 75%}
.col-desktop-80 {width: 80%}
.col-desktop-90 {width: 90%}

.col-desktop-10,
.col-desktop-20,
.col-desktop-25,
.col-desktop-33,
.col-desktop-50,
.col-desktop-67,
.col-desktop-75,
.col-desktop-80,
.col-desktop-90 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}
}

@media (min-width: 1200px) {
.col-big-screen-10 {width: 10%}
.col-big-screen-20 {width: 20%}
.col-big-screen-25 {width: 25%}
.col-big-screen-33 {width: 33.3333%}
.col-big-screen-50 {width: 50%}
.col-big-screen-67 {width: 66.6666%}
.col-big-screen-75 {width: 75%}
.col-big-screen-80 {width: 80%}
.col-big-screen-90 {width: 90%}

.col-big-screen-10,
.col-big-screen-20,
.col-big-screen-25,
.col-big-screen-33,
.col-big-screen-50,
.col-big-screen-67,
.col-big-screen-75,
.col-big-screen-80,
.col-big-screen-90 {
box-sizing: border-box;
float: left;
padding-right: 15px;
padding-left: 15px;
}
}

/* Grid End */

/* Footer */
.footer {
margin: 30px auto 0;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
background: #fff;
padding: 20px 30px;
font-size:14px;
color: #666;
}

.footer:before, .footer:after {
content: '';
display: table;
}

.footer:after {
clear: both;
}

.footer a {
text-decoration: none;
color: #666;
}

.footer a:hover {
color: #999;
}

.footer h4 {
margin-bottom: 9px;
color: #000;
}

.footer-col {
margin-bottom: 20px;
}

.logo {
display: inline-block;
font-size: 32px;
color: #0073c4;
font-weight: bold;
letter-spacing: -3.5px;
margin: 15px 0 0 0;
}

.address {
margin-top:15px;
color: #aaa;
}

.footer-links {
list-style-type: none;
}

.footer-links li {
margin-bottom:3px;
}

.social-link {
border-radius: 50%;
padding: 6px 12px 2px;
font-size: 25px;
transition: all 500ms ease;
color: #333;
background: #eee;
text-decoration: none;
line-height: 30px;
display: inline-block;
margin-bottom: 2px;
height:45px;
width:45px;
text-align: center;
}

.social-link i {
font-size:20px;
line-height: 40px;
}

a.social-link:hover {
color: #fff;
background-color: #0073c4;
}

.legal {
border-top: 1px solid #ddd;
padding-top: 20px;
text-align: center;
}

.copyright-message {
font-weight:bold;
color: #000;
display: inline-block;
}

.legal-links {
display: inline-block;
margin-bottom: 10px;
}

@media(min-width:800px) {
.copyright-message {
display: block;
float:left;
}

.legal-links {
display: block;
float:right;
margin-bottom: 0;
}
}
CSS
Browser support:
           
8+