Responsive site, when resizing the elements go to the bottom of the page

0

The page has only one photo in the center and some texts. I added a Media Query so that when the viewport is less than 700px it magnifies the images, maaas as I decrease my screen, it explodes ... and drops down to the bottom of the page.

When I lower the screen the responsiveness comes in ... but at a certain point (500px approx), it explodes and goes down to the bottom. And also, when I access from a cell phone, the image "img1.jpg" has to be 100% (or less) wide, that is, it has to expand, to get big. But when I do it the same and all the elements become small.

How to solve?

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>
    
asked by anonymous 04.12.2015 / 21:04

1 answer

0

I hope I can help but if I can show you more in detail what is happening I can help you more. Here are some tips that are key points for responsive layout.

Include the view port tag

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

Summarizing this meta tag tells the browser that you want to see the site in the same proportion no matter how many pixels the screen has. So you can better control your layout at any screen size.

Use relative measures

When it comes to responsive layout almost all measurements are relative to screen size so use relative measures (%, in) to make the elements of your page fit the different screen sizes.

Example:

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