Высота нижнего колонтитула в медийном запросе

Question

вот мой нижний колонтитул, когда он не сведен к минимуму.

и это мой сноска при сворачивании

Я уже попробовать запросы средств массовой информации, но ее не удалось футер его не изменяя это выглядит как высота имеет предел высоты. Как я могу это исправить? im new для html и css. Может ли кто-нибудь дать мне идеи, как это сделать? TIA guys :)

вот мой html код для нижнего колонтитула.

<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 : 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> 
     </div> 
    </div> 
    </footer> 

вот мой CSS код:

@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; 
    } 

Answer 1

Во-первых, правила СМИ запрос должен быть последним в вашем CSS или иначе они не будут переопределяют параметры, заданные в основных правилах.

Во-вторых, у вас есть встроенные стили на ваших элементах, где, например, div, содержащий карту, имеет фиксированную высоту 150 пикселей, что скорее всего испортит ваши внешние правила.

Я советую заменить встроенные стили классами, чтобы получить более удобный и менее подверженный ошибкам код.

---

Обновление на основе комментариев

Вместо наличия встроенного стиля в разметке, как это,

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

заменить встроенный стиль с классом,

и добавьте это в свой CSS.

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