Site no desktop bom, mas no mobile muuito pequeno

05/12/2015

0

Fala galera, estou fazendo um site de divulgação com uma logo, um spritezinho e um pequeno texto com uma mensagem.

Quando acesso ele do desktop, a resolução, tamanho, alinhamento, tudo OK! Mas, ao acessar do celular, tudo ficou extremamente reduzido/pequeno. Como resolver isso?

Site (Se possível, acessem do celular para entenderem):
http://agoravai2.esy.es/

HTML:

<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>


CSS:

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;
}

Responder

Posts

05/12/2015

Lucas Guedes

Boa tarde Gtw, acredito que esta pequeno a partir do celular que esta usando para visualizar o site, fiz um teste com meu celular e esta normal.
Segue a imagem

[img]http://arquivo.devmedia.com.br/forum/imagem/465575-20151205-131919.png[/img]
Responder

05/12/2015

Marcelo Pastore

Resolvido???
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar