Menu content does not fit in mobile mode

Question

The "menu" is in the page footer. With a picture, a sprite and text. When I resize and open the site or by phone, the menu does not fit. I tried to add some medium queries, but without success.

I want in the way mobile and or resize the screen, the image, text and sprite fit according to the size of the viewport.

Link site

If possible, resize the screen to a small width, open the browser console or the same cell.

CSS:

html, body{
  width: 100%;
  height: 100%;
    margin: 0;
    padding: 0;

}

ul, li{
  margin: 0;
  padding: 0;
}



h2{
   font-family: 'Open Sans Condensed', sans-serif !important;
   color: black !important;
   font-size: 30px !important;   
   line-height: 15px !important;
}


#principal {
    width: 100%;
    height: 100%;
    background-image: url('../images/background.jpg');
    position: absolute;
    background-repeat: no-repeat;     
    background-position: center center;
    background-size: cover;
}


#faixa{     
    position: absolute;
    width: 100%;        
    background-image: url('../images/faixa2.png');
    background-repeat: no-repeat;
    bottom: 0;
}



#img-logo{ 

  margin-left: 35%;  
  display: inline-block; 
  text-align: center;
}


#contato{
    position: absolute;
    margin-left: 20px;  
    display: inline-block;
    height:auto; 
    text-align: center;
}



@media(max-width:1050px){
  #img-logo{
   margin-left: 20%;
  }
}

@media(max-width:760px){
  #img-logo{
  margin-left: 10%;
  }
}

@media(max-width:635px){
  #img-logo{
   margin-left: 5%;
  } 
}


@media(max-width:580px){
  #img-logo{
   margin-left: 0;
  } 
}
@media(max-width:551px){

 /* #logo{
  width: 20%;
   }*/
 /* }
  #img-logo{
   width: 50%;
   height: 25%;
 }*/
} 

HTML:

<div id="principal">
    <div id="faixa">

       <img src="images/logo4.png" id="img-logo" class="img-responsive">

               <div id="contato">

                 <ul>
                        <li><a href="" target="_blank" class="img_sprite1"></a></li>
                          <li><a href="" target="_blank" class="img_sprite2"></a></li>
                           <li><a href="" target="_blank" class="img_sprite3"></a></li>
                 </ul>

                <h2>  (44) 4444-4444 <br><br> <span style="font-size: 18px"> Av. blablabal, 2323 - fer ie jeo <br> cidade - país</span> </h2>
            </div>
        </div>
    </div>  

I have two divs. The main , with the background image and the div group , which obviously is a yellow stripe. Within this div group I added the logo, directly by the tag img and a div with sprite and text. I've tried many ways to modify the media but from what I understand, the range of the image appears only when you have some content inside. She alone is not displayed. So when we decrease the image size, the track size is automatically modified as well. I've tried to insert a div with the logo in the background, also leaving soon, the sprite and isolated text div group and nothing. I tried to modify the size of the content in many different ways, but without success /:

Answer 1

Try to put in the query of @media (max-width: 760px) different kind of dimension for the two div ( logo and contato ), At this size you can give to the image a porcentage dimension.

Try to give to delete some information on mobile (so it can fit better), and change the font size.