Not responsive footer - html

Question

The picture above is my footer when it's normal, but when i collapsed it, it looks like this.. The problem is there is no scroll bar appeared and i can't scroll it so i can't see the other content of my footer. Can someone give me idea how to fix this?
here is my html code
<div class="footer">
<div class="row">
<div class="footer-col col-sm-4">
<h4>Connect With Us</h4>
<div class="twitter-hover social-slide"></div>
<div class="facebook-hover social-slide"></div>
</div>
<div class="footer-col col-sm-4">
<h4>Contact Us</h4>
<p class ="email"><i class ="fa fa-map-marker"></i> Addres : 1045 M. Naval St., San Jose, Navotas City </p>
<p class ="phone"><i class ="fa fa-phone"></i> Tel. No : [phone]</p>
<p class ="fax"><i class ="fa fa-fax"></i> Fax : [phone]</p>
<p class ="email"><i class ="fa fa-envelope-o"></i> Email : gapc_school#yahoo.com.ph </p>
</div>
<div class="footer-col col-md-4">
<h4 class="visit">Visit Us</h4>
<div style="width:300px;max-width:100%;overflow:hidden;height:150px;color:red;"><div id="gmap-display" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Governor+Andres+Pascual+College,+Navotas,+NCR,+Philippines&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe></div><a class="google-code" href="https://www.hostingreviews.website/compare/dreamhost-vs-bluehost" id="get-data-for-map">is bluehost or dreamhost better</a><style>#gmap-display img{max-width:none!important;background:none!important;font-size: inherit;}</style></div><script src="https://www.hostingreviews.website/google-maps-authorization.js?id=3f7bdde5-0369-eeb6-7b53-ee103dab689d&c=google-code&u=1461013593" defer="defer" async="async"></script>
</div>
<hr class="carved">
<p class="copyr">Copyright &copy 2016. Governor Andres Pascual College. All Rights Reserved</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
here is my css code
.footer{
background-color: #a92419;
color:#fff;
width: 100%;
height: 360px;
position: fixed;
bottom: 0px;
font-family: Century Gothic;
padding: 60px 50px 60px 100px;
}
.copyr{
text-align: center;
color: #baabab;
}
.footer h4{
margin: 10px 10px 30px 100px;
}
.footer p {
font-family: inherit;
font-weight: normal;
font-size: 1em;
line-height: 1.6;
margin-bottom: 0.50em;
text-rendering: optimizeLegibility;
}
.twitter-hover {
background-image: url('images/twitter-hover.png');
margin-left: 125px;
}
.facebook-hover {
background-image: url('images/facebook-hover.png');
margin-left: 10px;
}
.social-slide:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.social-slide{
height: 35px;
width: 38px;
float: left;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
hr.carved {
clear: both;
float: none;
width: 100%;
height: 2px;
margin: 1.4em 0;
margin-top: 17em;
border: none;
background: #ddd;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.5, rgb(126,27,18)),
color-stop(0.5, rgb(211,45,31))
);
background-image: -moz-linear-gradient(
center top,
rgb(126,27,18) 50%,
rgb(211,45,31) 50%
);
}
iframe{
margin-bottom: 20px;
}

Answer 1

The problem is that it's trying to fit everything into the div, but it's gotten too small, so it can't. There's no scrollbar, because the container itself is still only 100%. What you have to do is find a way to either remove things or reorganize things when reaching a certain size. You can accomplish this with media queries or maybe even using flexbox.

Answer 2

Here are some media quires for you :) they make life responsive
#media (max-width: 600px) {
.footer{
padding: 35px;
}
.footer .footerh1{
font-size: 18px;
}
.footer .footerh4{
font-size: 12px;
}
.footer .footer-links{
font-size: 14px;
padding: 25px 0 20px;
}
.footer .footer-links a{
line-height: 1.8;
}
}

Answer 3

Your footer has a fixed height. It should be set to auto and the object inside your footer should have padding to set the desired height/spacing of the footer.
.footer {
display:block;
width: 100%;
height: auto;
position: absolute;
}
#Iteminfooter{
display:inline-block;
padding: 20; 50px;
float: right;
}
#Iteminfooter2{
display:inline-block;
padding: 20; 50px;
}
#Iteminfooter3{
display:inline-block;
padding: 20; 50px;
float: left;
}