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>