Martin Ďurický Martin Ďurický - 3 years ago 180
CSS Question

HTML logo not responsive

I am making a website. In its footer I have a logo. It's on the right place but when I visit the site with mobile, the logo is on the wrong position.

It was working before and now it is not. I can't figure out why. Here is my code:

HTML

<footer class="page-foot bg-dark">
<section class="footer-content">
<div class="container">
<div class="rd-navbar-brand pull-lg-left"><a href="index.html"
class="brand-name">
<img src="logo1.png" style="width: 35%" width="120px">
</div>
<div style="text-align: left;">
<ul class="list-inline list-inline-mod-1 visible-md-inline-block
visible-lg-inline-block pull-sm-right">
<li><a href="meadows.html">Rolling Meadows</a></li>
<li><a href="heights.html">Attorney Arlington Heights</a></li>
<li><a href="palatine.html">Lawyer Palatine </a></li>
<li><a href="mount.html">Attorney Mount Prospect</a></li>
<li><a href="des.html">Lawyer Des Plaines</a></li>
<li><a href="scha.html">Attorney Schaumburg</a></li>
<li><a href="hoff.html">Hoffman Estates</a></li>
<li><a href="elk.html">Attorney Elk Grove Village</a></li>
</ul>
</div>
</div>
</section>
</footer>


CSS It's specifying the position for the logo

.page-foot .rd-navbar-brand {
margin-bottom: -4%;
margin-left: -18%;
}


I am new in
CSS
and
HTML
, could you explain why this happens?

Answer Source

.page-foot .rd-navbar-brand has negative margins on it - take those off and it should go back to the right spot! Added some bottom padding so the logo has equal padding on the top/bottom.

@media (max-width: 767px){
  .page-foot .rd-navbar-brand{
    margin: 0 0 30px;
  }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download