0
Good evening, I made a responsive site and I was testing in Mozilla to see how it looked on mobile devices and it seemed all right, but when I put it on the air it did not look like I expected.
This is how I tested and how I wanted:
That’s how you wanted it when you hit the contacts:
And that’s how it got on the phone:
What can I do so that my site does not have the size of the display, but the available size already counting on the settings bars of the browsers, in this case the safari of iphone?
I leave my code so you can see. html:
$(document).ready(function(){
$('footer').on('click', function(){
$(this).toggleClass('sobe');
});
// Definir a altura do section entre a imagem e o footer
var altura = $('#foto').height();
$('section').css('height', '100vh').css('height', '-='+ altura).css('height', '-=44px');
// Definir a altura da imagem dentro da section
var altura_section = $('section').height();
$('section img').css('height', altura_section);
});
$(window).resize(function(){
var altura = $('#foto').height();
$('section').css('height', '100vh').css('height', '-='+ altura).css('height', '-=44px');
var altura_section = $('section').height();
$('section img').css('height', altura_section);
});@import url('https://fonts.googleapis.com/css?family=Muli');
* {
margin: 0;
padding: 0;
font-family: 'Muli', sans-serif;
overflow: hidden;
}
h3 {
color: #025aa4;
text-align: center;
}
#container {
height: 100vh;
width: 100%vw;
margin: auto;
}
header {
margin-bottom: -2px;
width: 100%;
height: auto;
background: url('../_img/untitled-2.jpg') no-repeat ;
background-size: 100vw;
background-attachment: fixed;
}
section {
width: 100vw;
position: relative;
text-align: center;
}
section img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
section p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
letter-spacing: 2px;
word-spacing: 10px;
color: #fff;
font-size: 350%;
font-weight: bolder;
text-shadow: 5px 5px 4px rgba(0,0,0, .6);
}
footer {
position: fixed;
bottom: 0px;
width: 100vw;
height: 40px;
transition: height 1s ease;
}
.sobe {
height: 100vh;
}
footer i {
color: #025aa4;
}
footer .cabecalho-footer {
position: relative;
background-image: none;
background-color: #025aa4;
height: 40px;
width: 100%;
cursor: pointer;
}
footer .cabecalho-footer i {
opacity: 0;
color: #fff;
font-size: 30px;
position: absolute;
top: 50%;
right: 10px;
transform: translate(-0%, -50%);
}
footer .cabecalho-footer h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
color: #fff;
font-family: 'Advent Pro', sans-serif;
letter-spacing: 3px;
}
footer .contacto-flow {
box-sizing: border-box;
width: 100%;
height: 100vh;
overflow: scroll;
background-color: #fff;
}
footer .contactos {
width: 100%;
height: auto;
background: #fff;
text-align: center;
line-height: 25px;
}
footer .horario {
margin-bottom: 100px;
}
@media all and (orientation:landscape) {
#container {
position: relative;
}
section {
position: absolute;
top: 68%;
left: 50%;
transform: translate(-50%, -68%);
padding: 80px;
background-color: rgba(0,0,0, .5);
}
section img {
visibility: hidden;
}
section p{
visibility: initial;
}
footer .contactos {
font-size: 20px;
}
.contactos p {
line-height: 45px;
}
}
@media screen and (min-width: 1025px) {
footer .contacto-flow .contactos{
box-sizing: border-box;
margin: auto;
width: 75%;
height: 100vh;
overflow: hidden;
box-shadow: 2px 2px 10px 5px rgba(0,0,0, .2);
}
}<!DOCTYPE html>
<html lang="pt-pt">
<head>
<title>Estores JF</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="_css/estilo.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="_img/Estores_JF.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="_js/jquery.js"></script>
</head>
<body>
<div id="container">
<header>
<img id="foto" src="_img/untitled-2.jpg" style="visibility: hidden; width: 100vw;" />
</header>
<section>
<img src="_img/Brevemente.gif"/>
<p>BREVEMENTE DISPONÍVEL!</p>
</section>
<footer>
<header class="cabecalho-footer">
<h1>CONTACTOS</h1>
<i class="fa fa-times" aria-hidden="true"></i>
</header>
<div class="contacto-flow">
<div class="contactos">
<div class="morada">
<br>
<h3>Morada:</h3>
<p><i class="fa fa-home" aria-hidden="true"></i>  
Rua Fonte da Carreira, nº 350 <br>
Pav. A2, Parque Empresarial Fonte da Carreira <br>
Adroana <br>
2645-467 Manique</p> <br>
<p><i class="fa fa-map-marker" aria-hidden="true"></i>  
N38°44'24" - W9°22'40"</p><br>
</div>
<div class="contacto">
<h3>Contacto:</h3>
<p><i class="fa fa-phone" aria-hidden="true"></i>  
Tel. 21 421 50 78</p>
<p><i class="fa fa-fax" aria-hidden="true"></i>  
Fax. 21 421 13 21</p>
<p><i class="fa fa-envelope" aria-hidden="true"></i>  
[email protected]</p><br>
</div>
<div class="horario">
<h3>Horário:</h3>
<p><i class="fa fa-clock-o" aria-hidden="true"></i>  
2ª a 6ª das 9 - 12.30 / 14 - 17.30</p>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
You can put a "padding-top" only for certain screen resolutions using @media for example. Or use the "viewport" meta tag to see if it improves... Anyway put your HTML and CSS code that makes it easy to give you an accurate answer.
– hugocsl
@hugocsl I used media and I used meta tag viewport and it looked like this... I’ve left my code, thanks
– Diogo Sousa
I don’t know much about JS, but it seems that there you want to put a space of 100vh - 44px correct? The idea is valid, but I think there may be something wrong there, although I could not simulate the mistake here.
– hugocsl
Yes, to find the right height of my Action, I did the full screen height, minus 44px of the footer and minus the image height I have @hugocsl... I just google chorme on the phone and gave as I wanted, think it might be just safari?
– Diogo Sousa
I accessed in Safari here on iPhone and everything seemed ok, except the image of the doll holding the plate that was cut.
– Sam
@dvd when clicked on contacts and it went up, the same blue bar of contacts remained visible?
– Diogo Sousa
Yes, normal....
– Sam