Skip to main content
Bumped by Community user
formatação usando o snippet
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

CSS:

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


}

HTML:

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

CSS:

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


}

HTML:

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

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>
 

Bumped by Community user
Fonte Link
GtGtGt
  • 511
  • 5
  • 17

Site reponsivo, ao redimensionar os elementos vão para o fundo da página

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?

CSS:

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


}

HTML:

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