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:


<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"
<img src="logo1.png" style="width: 35%" width="120px">
<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>

CSS It's specifying the position for the logo

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

I am new in
, 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