title: Make margin bottom responsive
body: <p>This is the footer when not minimized, as you can see the margin is ok.</p>
  
  <p><img src="https://i.stack.imgur.com/uosB1.png" alt="footer not minimized"></p>
  
  <p>This is the footer when minimized.The margin bottom get wider.</p>
  
  <p><img src="https://i.stack.imgur.com/7lwPz.png" alt="footer when minimized"></p>
  
  <p>I want the margin automatically adjust when minimized or in any sized but i don't what to use media queries for that because i think its possible to do it without using media queries. Can someone help me? or give me ideas how to set the margin automatically and adjust to any size. Im new to html and css.</p>
  
  <p>Here is my html code for the footer.</p>
  
  <pre><code>    &lt;footer class="footer"&gt;
        &lt;div class="container"&gt;
           &lt;div class="row"&gt;
              &lt;div class="footer-col col-sm-4"&gt;
                 &lt;h4&gt;Connect With Us&lt;/h4&gt;
                    &lt;ul&gt;
                      &lt;li class="twit"&gt;&lt;a href="#"&gt;&lt;span class="twitter-hover social-slide"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="fb"&gt;&lt;a href="#"&gt;&lt;span class="facebook-hover social-slide"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="link"&gt;&lt;a href="#"&gt;&lt;span class="linkedin-hover social-slide"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                &lt;/div&gt;
                   &lt;div class="footer-col col-sm-4"&gt;
                    &lt;h4&gt;Contact Us&lt;/h4&gt;
                     &lt;ul&gt;
                      &lt;li class ="address"&gt;&lt;i class ="fa fa-map-marker"&gt;&lt;/i&gt; Addres : 1045 M. Naval St., San Jose, Navotas City  &lt;/li&gt;
                      &lt;li class ="phone"&gt;&lt;i class ="fa fa-phone"&gt;&lt;/i&gt; Tel. No : (02) 282-9036&lt;/li&gt;
                      &lt;li class ="fax"&gt;&lt;i class ="fa fa-fax"&gt;&lt;/i&gt; Fax : (02) 282-9035&lt;/li&gt;
                      &lt;li class ="email"&gt;&lt;i class ="fa fa-envelope-o"&gt;&lt;/i&gt; Email : gapc_school@yahoo.com.ph &lt;/li&gt;
                      &lt;ul&gt;
              &lt;/div&gt;
            &lt;div class ="footer-col col-sm-4"&gt;
                  &lt;h4 class="visit"&gt;Visit Us&lt;/h4&gt;  
                  &lt;div style="width:400px;max-width:100%;overflow:hidden;height:150px;color:red;"&gt;&lt;div id="gmap-display" style="height:100%; width:100%;max-width:100%;"&gt;&lt;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&amp;key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"&gt;&lt;/iframe&gt;&lt;/div&gt;&lt;a class="google-code" href="https://www.hostingreviews.website/compare/dreamhost-vs-bluehost" id="get-data-for-map"&gt;is bluehost or dreamhost better&lt;/a&gt;&lt;style&gt;#gmap-display img{max-width:none!important;background:none!important;font-size: inherit;}&lt;/style&gt;&lt;/div&gt;&lt;script src="https://www.hostingreviews.website/google-maps-authorization.js?id=3f7bdde5-0369-eeb6-7b53-ee103dab689d&amp;c=google-code&amp;u=1461013593" defer="defer" async="async"&gt;&lt;/script&gt;  
              &lt;/div&gt;
             &lt;hr class="carved"&gt;
              &lt;p class="copyr"&gt;Copyright &amp;copy 2016. Governor Andres Pascual College. All Rights Reserved&lt;/p&gt;
          &lt;/div&gt;
  
         &lt;/div&gt;
       &lt;/div&gt;
    &lt;/footer&gt;
  </code></pre>
  
  <p>here is my css code.</p>
  
  <pre><code>    * {
       margin: 0;
          }
         html, body {
         height: 100%;
         overflow: auto;
        }
        .content {
        min-height: 100%;
        /* equal to footer height */
        margin-bottom: auto; 
        }
        .content:after {
        content: "";
        display: block;
        }
       .footer, .content:after {
       height: auto; 
       }
      .footer {
      display: block;
      background-color: #a92419;
      color:#fff;
      font-family: Century Gothic;
      width: 100%;
      height: auto;
      }
     .footer-col h4 {
      text-align: center;
      margin-top: 40px;
     }
  
     .footer-col ul {
     list-style: none;
     text-align: center;
     padding-left: 0px;
     }
     .link,.fb,.twit{
     display: inline;
     }
     .address,.phone,.fax,.email{
      display: block;
      }
      .social-slide {
      display: inline-block;
       height: 35px;
         width: 38px;
       -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;
       /* don't use float: left! */
       }
  
       .social-slide:first-child {
        margin-left: 5px;
        margin-right: 5px;
        }
        .social-slide:hover {
        background-position: 0px -48px;
        box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
        }
        .twitter-hover  { background-image: url('images/twitter-hover.png'); }
        .facebook-hover { background-image: url('images/facebook-hover.png');             }
        .linkedin-hover { background-image: url('images/linkedin-hover.png'); }
  
        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%
        );
        }
        .copyr{
        text-align: center;
        color:    #baabab;
  
        }
  </code></pre>