1
Guys can not find the error that is generating this white band on the screen when I give a full zoom and the mobile screen when I access by it.
<!DOCTYPE html>
<html>
<head>
<title>Iracema Filha - OFICIAL</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script>
<meta charset="utf-8">
</head>
<body id="topo">
<div class="tudo">
<div id="container-head">
<div id="head">
<div id="menu">
<ul id="ul-menu">
<li class="li-menu"><a class="scroll" href="http://www.iracemafilha.com">HOME</a></li>
<li class="li-menu"><a class="scroll" href="http://www.iracemafilha.com/biografia">BIOGRAFIA</a></li>
<li class="li-menu"><a class="scroll" href="#discografia">DISCOGRAFIA</a></li>
<li class="li-menu"><a class="scroll" href="#fotos">FOTOS</a></li>
<li class="li-menu"><a class="scroll" href="#videos">VIDEOS</a></li>
<li class="li-menu"><a class="scroll" href="#agenda">AGENDA</a></li>
<li class="li-menu"><a class="scroll" href="#convite">CONVITE</a></li>
<li class="li-menu"><a class="scroll" href="#contato">CONTATO</a></li>
</ul>
<div id="player-music">
<audio id="player-audio-head" preload="auto">
<source src="mp3/somadorador.mp3" type="audio/mpeg">
</audio>
<script type="text/javascript">
var audio = document.getElementById("player-audio-head");
var status = 0;
function playAudio () {
audio.play();
}
function pauseAudio () {
audio.pause()
}
$('#play').hover(function() {
$(this).fadeOut(1000);
});
</script>
<button id="play" type="text" class="input-audio-control" onclick="playAudio()"></button>
<button id="pause" type="text" class="input-audio-control" onclick="pauseAudio()"></button>
</div>
</div>
</div>
</div>
<div id="div-content">
<div id="photos">
<div id="div-p-photos">
<p id="p-photos">Iracema Filha</p>
<p id="versiculo-apr">
"Aquele que oferece sacrifício de louvor me glorificará; e àquele que
bem ordena o seu caminho eu mostrarei a salvação de Deus." <br><span id="span-vers">(Salmos 50:23)<span></p>
</div>
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
<div id="proximos-eventos">
<div id="div-prox-eventos">
<p id="prox-eventos">Próximos eventos</p>
</div>
<div id="datas-prox-evento">
<div id="div-prox-event-center">
<div class="data-evento1">
<a href="#">
<p class="p-data">05/06</p><br>
<p class="p-local-igreja">Igreja Pentecostal Assembléia de Deus</p>
<p class="p-local-cidade">Icoaraci, Pará</p></a>
</div>
<div class="data-evento2">
<a href="#">
<p class="p-data">19/06</p><br>
<p class="p-local-igreja">Igreja Pentecostal Assembléia de Deus</p>
<p class="p-local-cidade">Ilha de Cotijuba, Pará</p></a>
</div>
<div class="data-evento3">
<a href="#">
<p class="p-data">21/06</p><br>
<p class="p-local-igreja">Igreja Pentecostal Assembléia de Deus</p>
<p class="p-local-cidade">Belém, Pará</p></a>
</div>
<div class="data-evento4">
<a href="#">
<p class="p-data">22/06</p><br>
<p class="p-local-igreja">Igreja Pentecostal Assembléia de Deus</p>
<p class="p-local-cidade">Belém, Pará</p></a>
</div>
</div>
</div>
</div>
<footer>
<div id="div-bar-rodape">
<p id="p-rodape" align="center">© Copyright 2015 - Iracema Filha - Todos os direitos reservados.</a></p>
<div id="social-network">
<a target="_blank" href="https://fb.com/IracemaFilhaOficial"><img src="icon/facebook2.png" alt=""></img></a>
<a target="_blank" href="#"><img src="icon/twitter.png" height="64" width="64" alt=""></img></a>
<a target="_blank" href="#"><img src="icon/instagram12.png" height="64" width="64" alt=""></img></a>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
CSS code:
* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
}
body {
width: 100%;
min-width: 1353px;
margin:0 auto;
padding: 0px;
}
.tudo {
position:relative;
}
#head{
/*background: red;*/
width: 100%;
}
#container-head{
background: #483D45;
width: 100%;
height:70px;
/*background: green;*/
/*border-bottom: 1px solid white;*/
}
#menu{
width: 100%;
margin: 0 auto;
/*background: red;*/
}
#player-music{
text-align: center;
width: 170px;
height: 25px;
float: right;
margin-top: -24px;
}
#div-content{
width: 100%;
height: 980px;
min-height: 481px;
background: #605B61;
}
#proximos-eventos{
/*width: 100%;*/
height: 30%;
padding-top: 0px;
/*background: green;*/
}
#div-prox-eventos{
width: 100%;
height: 50px;
margin: 0 auto;
/*background: yellow;*/
}
#prox-eventos{
color: #FFF;
text-align: center;
padding-top: 15px;
margin: 0 auto;
width: 50%;
font-size: 300%;
font-weight: bold;
font-family: 'Abel', sans-serif;
text-transform: uppercase;
-o-transition:.4s;
-ms-transition:.4s;
-moz-transition:.4s;
-webkit-transition:.4s;
}
#prox-eventos:hover{
color: black;
}
#datas-prox-evento{
width: 100%;
height: 85%;
margin: 0 auto;
/*background: orange;*/
text-align: center;
}
#datas-prox-evento a{
text-decoration: none;
outline: none;
}
#datas-prox-event a:active{
outline: none;
}
#div-prox-event-center{
width: 1200px;
margin: 0 auto;
height: 100%;
/*background: white;*/
}
.data-evento1{
/*background: red;*/
float: left;
}
.data-evento2{
/*background: black;*/
float: left;
}
.data-evento3{
/*background: purple;*/
float: right;
}
.data-evento4{
/*background: black;*/
float: right;
}
.data-evento1, .data-evento2, .data-evento3, .data-evento4{
width: 240px;
margin-left: 30px;
margin-right: 30px;
height: 200px;
margin-top: 40px;
border-radius: 30px;
}
.data-evento1:hover, .data-evento2:hover, .data-evento3:hover, .data-evento4:hover{
background: #483D45;
-o-transition:.4s;
-ms-transition:.4s;
-moz-transition:.4s;
-webkit-transition:.4s;
}
.p-data, .p-local-igreja, .p-local-cidade{
color: #FFF;
font-family: 'Abel', sans-serif;
}
.p-data{
font-size: 65px;
padding-top: 8px;
}
.p-local-igreja{
font-size: 20px;
padding-left: 20px;
padding-right: 20px;
margin-top: -15px;
}
.p-local-cidade{
padding-top: 5px;
}
#photos{
width: 100%;
height: 671px;
background: #5B6161;
/*border-bottom: 1px solid white;*/
}
#div-p-photos{
width: 75%;
height: 70px;
margin: 0 auto;
position: absolute;
top: -40%;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#p-photos{
width: 100%;
height: 50%;
/*background: black;*/
color: #FFF;
text-align: center;
font-size: 100px;
font-family: 'Pinyon Script', cursive;
-o-transition:.4s;
-ms-transition:.4s;
-moz-transition:.4s;
-webkit-transition:.4s;
}
#span-vers{
color: #FFF;
font-style: normal;
}
#versiculo-apr{
color: #191919;
height: 10px;
margin: 0 auto;
padding-top: 75px;
text-align: center;
font-family: 'Oswald', sans-serif;
-o-transition:.4s;
-ms-transition:.4s;
-moz-transition:.4s;
-webkit-transition:.4s;
font-style: italic;
}
#versiculo-apr:hover{
color: #FFF;
}
#play{
background: url('../icon/play1.png') no-repeat;
width: 25px;
height: 25px;
border: 0px;
}
#pause{
background: url('../icon/pause1.png') no-repeat;
width: 25px;
height: 25px;
border: 0px;
}
#ul-menu{
text-align: center;
padding-top: 25px;
word-spacing: 50px;
}
.li-menu{
display: inline;
font-family: 'Abel', sans-serif;
}
.li-menu a{
color: white;
text-decoration: none;
font-size: 15px;
background: #483D45;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.li-menu a:link{
color: white;
outline:none;
text-decoration: none;
}
.li-menu a:hover{
color: #826E7D;
text-decoration: none;
}
.li-menu a:active{
text-decoration: none;
outline:none
}
footer{
position:absolute;
width:100%;
min-width: 1353px;
height:80px; /* Mesma Altura do Rodapé */
background:#483D45;
}
#p-rodape{
padding-top: 30px;
width: 100%;
margin: 0 auto;
color: #FFF;
font-family: 'Abel', sans-serif;
font-size: 13px;
-o-transition:.4s;
-ms-transition:.4s;
-moz-transition:.4s;
-webkit-transition:.4s;
}
#p-rodape:hover{
color: black;
}
#div-rodape p a{
text-decoration: none;
color: #FFF;
}
#div-bar-rodape{
width: 610px;
height: 50px;
margin: 0 auto;
/*background: green;*/
}
#social-network{
width: 135px;
height: 25px;
float: right;
margin-top: -22px;
/*background: red;*/
}
#social-network img{
width: 25px;
height: 25px;
margin-left: 10px;
}
Image of the cell phone screen:
For me this blank is not showing up. Or at least I am not being able to recreate this in jsFiddle - http://jsfiddle.net/kzqv2c6r/
– Chun
Which version of the browser?
– Guilherme Nascimento
Try to put in the
bodyoneoverflow: hidden.– Bruno Wego