1

A page tem apenas uma foto no centro e alguns textos. Adicionei um Media Query para que, quando o viewport for menor que 700px ele aumente as imagens, maaas ao diminuir minha tela, ele explode... e desce para o fundo da página.

Quando eu diminuo a tela a responsividade entra... mas em determinado ponto (500px aprox), ele explode e desce pro fundo. E também, quando eu acessar de um celular, a imagem "img1.jpg" tem que estar com um width de 100% (ou menos), ou seja, tem que expandir, ficar grande. Mas quando faço isso a mesma e todos os elementos ficam pequenos.

Como resolver?

body, html {
    height:100%;
    width: 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;
    background: #181A1B;
    max-width: 500px;
    /* width: 100%;  BUUUUGA*/ 

}


.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/sprite.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/sprite.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/sprite.png');
  background-repeat: no-repeat;
  transition: 0.5s;
}

.img_sprite3:hover{

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


@media screen and (max-width:700px) {


        .block {
          background: #181A1B;

            }




        .block:before {
          content: '';
          display: inline-block;
          background: #181A1B;


        }

         .centered {
             border: 1px solid green;
            width: 100%; 



        } 

        .contato {
            margin-top: 40px;
        }

        .contato ul li {

            margin-right: 30px;
        }  

        .img_sprite1 {

          width: 63px;
          height: 65px;

          background-image: url('../img/sprite2.png');
          background-repeat: no-repeat;
          transition: 0.5s;
        }

        .img_sprite1:hover{

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

        .img_sprite2 {

          width: 63px;
          height: 65px;

          background-position: -70px 0;
          background-image: url('../img/sprite2.png');
          background-repeat: no-repeat;
          transition: 0.5s;

        }

        .img_sprite2:hover{

          background-position: -70px -69px;
          transition: 0.2s;
        }

        .img_sprite3 {

          width: 63px;
          height: 65px;

          background-position: -140px 0;
          background-image: url('../img/sprite2.png');
          background-repeat: no-repeat;
          transition: 0.5s;

        }

        .img_sprite3:hover{

          background-position: -140px -69px;
          transition: 0.2s;
        }

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


}
<div class="block">

    <div class="centered">
       <img src="img/img1.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:35px;"> test </a> <br> Test 2  </p>

    </div>




</div>

3
  • Adiciona o JSFiddle, por favor. Commented 5/12/2015 às 1:56
  • agoravai2.esy.es Coloquei o site num servidor grátis. O principal problema é quando acesso atraves do celular. No desktop fica perfeito, mas quando acesso do celuar ele fica muito, muito pequeno. Como resolvo esse problema de "tamanhos"?
    – GtGtGt
    Commented 5/12/2015 às 13:05
  • Bem, não deu pra ver aqui. Dá o erro 404. Mas uma dica: o desenvolvimento de sites responsivos tem uma filosofia: mobile first, ou seja, seja o que for que você está desenvolvendo, comece desenvolvendo para as telas menores. O Google Chrome te ajuda com isso. Se você não tiver, é bom instalar. Quando você estiver testando seu site, vá em: Configuração -> Mais Ferramentas -> Ferramentas do desenvolvedor. Na parte de baixo selecione "Emulação" ou "Emulation" e depois teste para os dispositivos móveis, fazendo as alterações necessárias. Commented 5/12/2015 às 20:40

1 Resposta 1

1

Espero poder ajudar mas se puder mostrar com mais detalhes o que esta acontecendo posso te ajudar mais. Segue algumas dicas que são pontos chaves para layout responsivo.

Inclua a tag view port

<meta name=viewport content="width=device-width, initial-scale=1">

Resumindo essa metatag informa ao browser que você deseja ver o site na mesma proporção não importa a quantidade de pixels que a tela tenha. Assim você pode controlar melhor o seu layout em qualquer tamanho de tela.

Use medidas relativas

Quando se trata de layout responsivo quase todas as medidas são relativas ao tamanho da tela logo use medidas relativas (%,em) para fazer com que os elementos da sua página se adaptem aos diferentes tamanhos de tela.

Exemplo:

@media screen and (max-width:700px) {
    .centered {
        width:100%;
    }
    .centered #img_logo{
       width:90%;
       margin:0 auto; /* centraliza */ 
    }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .