Site no desktop bom, mas no mobile muuito pequeno

<div class="block">
    <div class="centered">
      <img src="img/logo.jpg" id="img_logo">
    
      
      <div class="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>
       </div> 

    <p> <a style="font-size:20px;"> email</a> <br><br> texto<br>  </p>

    </div>

    


</div>

body, html {
	height:100%;
	padding:0;
	margin:0;
  background: #181A1B;
}

 p {
  font-family: 'Open Sans Condensed', san-serif;
  font-size: 12px;
  color: #C5C5C7;
  line-height: 14px;
  margin-top: 30px;
}

.block {
  height: 100%;
  text-align: center;
  background: #181A1B;

}

.block:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  background: #181A1B;
  
}

.centered {
  display: inline-block;
  vertical-align: middle;
  /*width: 100%; */
  max-width: 500px;
  background: #181A1B;
    
 
}


.contato ul{
  list-style: none;
  margin-top: 20px;
}

.contato ul li{
  margin-right: 10px;
  display: inline; 
}

.contato ul li a{
  display: inline-block;  
}


.img_sprite1 {

  width: 40px;
  height: 38px;
  
  background-image: url('../img/sprite5.png');
  background-repeat: no-repeat;
  transition: 0.5s;
}

.img_sprite1:hover{

  background-position: 0 -40px;
  transition: 0.2s;
}


.img_sprite2 {

  width: 40px;
  height: 38px;
 
  background-position: -49px 0;
  background-image: url('../img/sprite5.png');
  background-repeat: no-repeat;
  transition: 0.5s;
 
}

.img_sprite2:hover{

  background-position: -49px -40px;
  transition: 0.2s;
}

.img_sprite3 {

  width: 40px;
  height: 38px;
  
  background-position: -98px 0;
  background-image: url('../img/sprite5.png');
  background-repeat: no-repeat;
  transition: 0.5s;
}

.img_sprite3:hover{

  background-position: -98px -40px;
  transition: 0.2s;
}