Search code examples
htmlcssmedia-queries

Height of the footer in media query

here is my footer when its not minimized. enter image description here

and this is my footer when minimized

enter image description here

I already try the media queries but its failed the footer its not changing it looks like the height has a limit of height. How can i fix this? im new to html and css. Can someone give me ideas how to do it? TIA guys :)

here is my html code for footer.

 <footer class="footer">
<div class="container">
    <div class="row">
         <div class="footer-col col-sm-4">
               <h4>Connect With Us</h4>
                 <a href="https://twitter.com/official_gapc" target="_blank" title="Follow us on Twitter"><div class="twitter-hover social-slide"></div></a>
                 <a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts" target="_blank" title="Like us on Facebook"><div class="facebook-hover social-slide"></div></a>
                 <a href="https://www.linkedin.com/edu/governor-andres-pascual-college-in-navotas-city-39345" target="_blank" title="Join us on Linkedin"><div class="linkedin-hover social-slide"></div></a>
            </div>
             <div class="footer-col col-md-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 : (02) 282-9036</p>
                 <p class ="fax"><i class ="fa fa-fax"></i> Fax : (02) 282-9035</p>
                 <p class ="email"><i class ="fa fa-envelope-o"></i> Email : [email protected] </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>
      </div>
     </div>
   </footer>

here is my css code:

    @media (max-width: 768px) {
   .img-responsive{
    width: 300px;
    height:50px;
    padding-left:50px;
    }
   .footer{
    height: 500px;
    }
    }
    @media (max-width: 376px) {
   .img-responsive{
    width: 220px;
    height:50px;
    padding-left: 20px;
    }
    }
    @media (max-width: 286px) {
   .img-responsive{
    width: 180px;
    height:50px;
    padding-left: 5px;
    }
   .footer{
   height:500px;
   }

  * {
  margin: 0;
  }
  html, body {
  height: 100%;
  overflow: auto;
  }
  .content {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -300px; 
 }
 .content:after {
 content: "";
 display: block;
 }
.footer, .content:after {
 height: 300px; 
 }
.footer {
 background-color: #a92419;
 color:#fff;
 font-family: Century Gothic;
 width: 100%;
 display: inline-block;
 }
 h4{
 padding-left: 100px;
 padding-top: 20px;
 }
 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;
  }
 .copyr{
  text-align: center;
  color:    #baabab;
  }
Solution

  • First, the media query rules should be last in your CSS or else they will not override any setting set in the main rules.

    Second, you have inline styles on your elements, where for example the div containing the map has a fixed height of 150px, which most likely mess up your external rules.

    I advice to replace inline styles with classes to get a more maintainable and less error prone code.

    Update based on comment

    Instead of having inline style in the markup like this,

    <div style="width:300px;max-width:100%;overflow:hidden;height:150px;color:red;">

    replace the inline style with a class,

    <div class="div-for-map">

    and add this to your CSS.

    .div-for-map {
  width:300px;
  max-width:100%;
  overflow:hidden;
  height:150px;
  color:red;
}