White spacing when you zoom in full on the mobile page and screen

Asked

Viewed 258 times

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:

Espaço em branco na tela do celular

  • 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/

  • Which version of the browser?

  • Try to put in the body one overflow: hidden.

1 answer

0

#div-content{

    width: 100%;
    height: 980px;
    min-height: 481px;
    background: #605B61;
}

try to change to

#div-content{

    width: 100%;
    height: auto 980px;

    background: #605B61;
}

Avoid limiting height or width on a responsive site and prefer % type width:100%;

I hope I’ve helped.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.