Add responsive custom footer in Magento 2

Question

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

<div style="width: 16%; float: left;">
<h3>LOCATION</h3>
<a href="" target="_blank">Map</a></div>
<div style="width: 16%; float: left;">
<h3>SUPPORT</h3>
<a href="">Technical Support</a></div>
<div style="width: 17%; float: left;">
<h3>CONTACT</h3>
<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:

Mobile preview:

Answer 1

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">
    <h3>Location</h3>
</div>
<div class="footer-links">
    <h3>Support</h3>
</div>
<div class="footer-links">
    <h3>Contact</h3>
</div>
<div class="footer-links">
   <h3>My account</h3>
</div>
<div class="footer-links">
    <h3>Follow us</h3>
</div>

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

Note If require you can use display:block