I created a custom footer but I want it to be responsive. My code is:

<div style="width: 16%; float: left;">
<a href="" target="_blank">Map</a></div>
<div style="width: 16%; float: left;">
<a href="">Technical Support</a></div>
<div style="width: 17%; float: left;">
<a href="">Contact</a></div>
<div style="width: 17%; float: left;">
<h3>MY ACCOUNT</h3>
<a href="">Sign In</a></div>
<div style="width: 17%; float: left;">
<h3>FOLLOW US AT</h3>
<a href=""><img src="{{media url="wysiwyg/117705_facebook_512x512.png"}}" width="33px" height="32px" /></a> 
<a href=""><img src="{{media url="wysiwyg/twitter.png"}}" width="31px" height="30px" /></a></div>

Normal preview:

Normal preview

Mobile preview:

Mobile preview

  • are you using bootstrap ? – Pawan Sep 7 '18 at 2:01
  • I am using Magneto 2.1 and now I want to create responsive footer – kiran Sep 7 '18 at 2:04
  • could you please share URL Or code of footer ? – Pawan Sep 7 '18 at 2:05
  • please see attached screenshot. – kiran Sep 7 '18 at 2:36
  • please let me know if works. – Pawan Sep 7 '18 at 2:51

First thing you should avoid inline style if you want it to be responsive.

Secondly add a class to div and use media query.

For Example:

<div class="footer-links">
<div class="footer-links">
<div class="footer-links">
<div class="footer-links">
   <h3>My account</h3>
<div class="footer-links">
    <h3>Follow us</h3>

<style type="text/css">
    width: 16.66%;
    float: left;
@media only screen and (max-width: 767px) {
.footer-links {
    width: 100%;
    float: none;

Note If require you can use display:block

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.