1
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 increases the images, but when I decrease my screen, it explodes... and descends to the bottom of the page.
When I lower the screen the responsiveness enters... but at a certain point (500px approx), it explodes and descends to the background. And also, when I access from a mobile phone, the image "img1.jpg" has to be with a width of 100% (or less), that is, it has to expand, to be big. But when I do it the same and all the elements become small.
How to solve?
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>
Add the Jsfiddle, please.
– StillBuggin
http://agoravai2.esy.es I put the site on a free server. The main problem is when access via mobile. On the desktop is perfect, but when celuar access it gets very, very small. How do I solve this problem of "sizes"?
– GtGtGt
Well, I couldn’t see it here. It gives the 404 error. But a tip: the development of responsive websites has a philosophy: mobile first, That is, whatever you are developing, start developing for smaller screens. Google Chrome helps you with this. If you don’t have it, it’s good to install it. When you’re testing your site, go to: Setup -> More Tools -> Developer Tools. At the bottom select "Emulation" or "Emulation" and then test for the mobile devices, making the necessary changes.
– StillBuggin