Hello, Developers!
I have a problem with the site that I made, I'm having a lot of headache for something so stupid ... As you can see in the image, this is the site, and I can not get rid of this "leftovers", I can not find the code that is causing this (if there is one)
There are two versions: The desktop and Mobile with several stylesheets to make you responsive. This leftover only happens in mobile versions, whether large or small.
In the Desktop version this margin disappears.
So I'm going to put the css code for the default mobile version, and the HTML. Please help me! ps: it's just a little big rs
-----------CSS-----
@charset "utf-8";
body{
background-color: rgb(26, 56, 77);
font-family: Arial, sans-serif;
margin:0;
padding:0;
max-width: 100%;
}
div.container{
height:100%;
width:100%;
margin:auto;
}
/* ----------------------- primeira divisão do site ---------------------------- */
header{ /* definições do header */
background-color: rgb(26, 56, 77);
color: #f5f5f5;
position: relative;
width: 100%;
margin: 0px;
}
#navegacao ul{
position: absolute;
top: -320px;
padding: 3px;
margin: 3px;
list-style: none;
font-family: 'Reem Kufi', sans-serif;
font-size: 16px;
letter-spacing: 3px;
text-align: center;
}
#navegacao ul li a {
padding: 2px 10px;
display: inline-block;
/* visual do link */
color: #fff;
margin:3px;
font-weight: 600;
text-decoration: none;
border-left: 1px solid rgb(240, 74, 51);
}
/* ------------- configurações da navbar suspensa ---------------- */
@media screen and (max-width:768px){
.menu-active .menu-anchor {background: rgb(26, 56, 77);}
.menu-anchor {
width: 40px;
height: 32px;
vertical-align: middle;
position: absolute;
text-indent: -9999px;
overflow: hidden;
cursor: pointer;
float: right;
right: 10px;
top: 5%;
background: rgb(26, 56, 77);
}
.menu-anchor:before {
content: "";
display: block;
margin: 7px auto;
width: 70%;
height: 0.25em;
background: rgb(240, 74, 51);
box-shadow: 0 .45em 0 0 rgb(240, 74, 51), 0 .9em 0 0 rgb(240, 74, 51);
}
header menu {
-webkit-transform: translateY(-210px);
-moz-transform: translateY(-210px);
-ms-transform: translateY(-210px);
transform: translateY(-210px);
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-ms-transition: all .25s linear;
transition: all .25s linear;
}
header, body {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all .25s linear;
-moz-transition: all .25s linear;
-ms-transition: all .25s linear;
transition: all .25s linear;
}
.menu-active menu {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.menu-active header,
.menu-active body {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
}
}
/* --------------- fim da navbar --------------- */
header div h3{ /* personalização do texto abaixo do logotipo */
color: #fff;
font-family: 'Reem Kufi', sans-serif;
font-size: 36px;
font-weight: 400;
padding-top: 0px;
padding-left: 50px;
padding-bottom: 90px;
}
header div img{ /* personalização da imagem ao lado do texto */
position: relative;
max-width:80%;
padding-top: 0px;
padding-left: 20%;
padding-bottom: 90px;
margin: -70px;
}
div.menina{
height: 70%;
}
/* ------------------- segunda divisão do site ----------------------- */
div.bloco2{
background-color: rgb(240, 74, 51);
margin-top: -15%;
}
section.divbloco2{
color: #fff;
position: relative;
box-sizing: border-box;
width: 100%;
padding-left: 10%;
padding-right: 8%;
display: flex;
flex-direction: column;
justify-content: center;
background-image:url(imagens/criancas.png);
background-repeat: no-repeat;
background-attachment: inherit;
background-position: 25% 10%, left;
height: 100vh;
transform: skewY(5deg);
}
#divbloco2 h2{
font-family: 'Reem Kufi', sans-serif;
font-size: 40px;
text-align: center;
letter-spacing:3px;
font-weight: 600;
transform: skewY(-5deg);
}
#divbloco2 p{
font-family: 'Roboto', sans-serif;
font-size: 20px;
text-align: center;
font-weight: 100;
transform: skewY(-5deg);
}
/* --------------------------- terceira divisão do site -------------------- */
div.bloco3{ /* div que envolvve toda a terceira parte do site */
background-color: #fff;
margin-top: -5%;
}
section.divbloco3{ /* personalização do section da terceira parte do site */
position: relative;
margin-top: -90px;
}
#divbloco3 h2{
font-family: 'Reem Kufi', sans-serif;
color: rgb(240, 74, 51);
font-size: 40px;
letter-spacing:3px;
font-weight: 600;
text-align: center;
margin:10px;
padding-top: 150px;
}
#divbloco3 p{
font-family: 'Roboto', sans-serif;
color: rgb(37, 37, 37);
font-size: 16px;
font-weight: 100;
text-align: center;
padding-right: 60px;
padding-left: 60px;
}
div picture img{
padding-left: 10%;
padding-right: 10%;
padding-top: 10%;
margin-top: 10%;
max-width: 90%;
}
/* -------------------------- quarta divisão do site ---------------------------- */
div.bloco4{
background-color: #fff;
font-family: 'Roboto', sans-serif;
color: #fff;
font-size: 16px;
font-weight: 100;
text-align: center;
}
div.parte1, .parte2, .parte3 h2{
font-family: 'Reem Kufi', sans-serif;
color: #fff;
font-weight: 200;
text-align: center;
}
div.parte1{ /* personalização da primeira div do bloco 4 */
background-color: rgb(245, 156, 47);
font-family: 'Roboto', sans-serif;
padding-top: 1;
padding-bottom: 1px;
}
div.fund1{
float: left;
width: 40%;
position: absolute;
}
div.parte1 p#textofund1{
padding-left: 10%;
padding-right: 10%;
padding-top: 10px;
padding-bottom: 10px;
}
div.parte1 p#texto-coluna1{
padding-left: 30%;
text-align: left;
width: 70%;
}
div.lado p#texto-coluna2{
width: 30%;
text-align: left;
display: inline-block;
padding-left: 50%;
padding-bottom: 20%;
}
div.parte2{
background-color: rgb(240, 74, 51);
font-family: 'Roboto', sans-serif;
padding-top: 1px;
padding-bottom: 1px;
}
div.fund2{
float:left;
width: 40%;
position: absolute;
}
div.parte2 p#textofund2{
padding-left: 10%;
padding-right: 10%;
padding-top: 10px;
padding-bottom: 10px;
}
div.parte2 p#texto-coluna3{
padding-left: 30%;
text-align: left;
width: 70%;
}
div.parte2 p#texto-coluna4{
text-align: left;
display: inline-block;
padding-left: 50%;
padding-bottom: 10%;
}
div.parte3{
background-color: rgb(03, 163, 87);
font-family: 'Roboto', sans-serif;
padding-top: 1;
padding-bottom: 1px;
}
div.parte3 p#texto-ensmedio{
padding-left: 10%;
padding-right: 10%;
padding-top: 10px;
padding-bottom: 10px;
}
div.primeira-parte{
float: left;
width: 40%;
position: absolute;
}
div.parte3 p#texto-coluna5{
padding-left: 30%;
text-align: left;
width: 70%;
}
div.parte3 p#texto-coluna6{
text-align: left;
display: inline-block;
padding-left: 50%;
padding-bottom: 10%;
}
img#triangulo-amarelo{
content: "";
height: 80px;
width: 80px;
position: absolute;
background-color: inherit;
top: 40%;
left: 47%;
z-index: 1;
cursor: inherit;
transform: rotate(0deg);
cursor: pointer;
transition: all 0.4s ease-in-out;
background-repeat: no-repeat;
}
.expandir img#triangulo-amarelo{
transform: rotate(180deg);
cursor: pointer;
transition: all 0.4s ease-in-out;
content: "";
height: 80px;
width: 80px;
position: absolute;
background-color: inherit;
top: calc(100% - 50px);
left: 47%;
z-index: 1;
cursor: inherit;
background-repeat: no-repeat;
}
img#triangulo-vermelho{ /*
content: "";
height: 80px;
width: 80px;
position: absolute;
background-color: inherit;
top: 40%;
left: 47%;
z-index: 1;
cursor: inherit;
transform: rotate(0deg);
cursor: pointer;
transition: all 0.4s ease-in-out;
background-repeat: no-repeat;
}
.expandir img#triangulo-vermelho{
transform: rotate(180deg);
cursor: pointer;
transition: all 0.4s ease-in-out;
content: "";
height: 80px;
width: 80px;
position: absolute;
background-color: inherit;
top: calc(100% - 50px);
left: 47%;
z-index: 1;
cursor: inherit;
background-repeat: no-repeat;
}
img#triangulo-verde{
content: "";
height: 80px;
width: 80px;
position: absolute;
background-color: inherit;
top: 40%;
left: 47%;
z-index: 1;
cursor: inherit;
transform: rotate(0deg);
cursor: pointer;
transition: all 0.4s ease-in-out;
background-repeat: no-repeat;
}
.expandir img#triangulo-verde{
transform: rotate(180deg);
cursor: pointer;
transition: all 0.4s ease-in-out;
content: "";
height: 80px;
width: 80px;
position: absolute;
background-color: inherit;
top: calc(100% - 50px);
left: 47%;
z-index: 1;
cursor: inherit;
background-repeat: no-repeat;
}
.sessao{
height: 70px;
width: 100%;
padding-top: 10px;
position: relative;
cursor: pointer;
transition: all 0.4s ease-in-out;
}
.expandir{
height: auto;
}
.expandir .conteudo{
display: block;
opacity: 1;
transition: all 0.4s ease-in-out;
}
.conteudo{
opacity: 0;
transition: all 0.4s ease-in-out;
}
div.bloco5{
background-color: #fff;
position: relative;
transform: skewY(-5deg);
}
#divbloco5 h2{
color: rgb(240, 74, 51);
text-align: center;
font-family: 'Reem Kufi', sans-serif;
font-size: 40px;
letter-spacing:3px;
font-weight: 600;
padding-left: 10%;
padding-top: 10%;
transform: skewY(5deg);
}
#divbloco5 p{
color: rgb(37, 37, 37);
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 16px;
text-align: center;
font-weight: 100;
padding-left:10%;
padding-right: 10%;
transform: skewY(5deg);
}
div.imgestrutura img{
position: relative;
padding-left: 5%;
padding-right: 5%;
max-width: 80%;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 15%;
margin-top: 10%;
transform: skewY(5deg);
}
@media (max-width: 310px) {
div.imgestrutura img{
position: relative;
padding-left: 5%;
padding-right: 5%;
padding-top: 10%;
max-width: 80%;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 15%;
margin-top: 10%;
transform: skewY(5deg);
}
}
/* ---------------------------- rodapé do site --------------------- */
footer{
background-color: rgb(26, 56, 77);
height: auto;
margin-top: -12%;
}
footer div.linha-diagonal{
padding-top: 15%;
}
footer h2{
color: rgb(245, 156, 47);
font-family: 'Reem Kufi', sans-serif;
font-size: 50px;
letter-spacing:3px;
text-align: center;
font-weight: 100;
}
footer p{
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 16px;
text-align: center;
font-weight: 100;
padding-left: 10%;
padding-right: 10%;
}
footer img#facebook{
float: left;
width: 50px;
margin-left: 45%;
}
footer img#instagram{
width:50px;
padding-left: 20px;
padding-bottom: 30px;
}<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Centro Educacional SOLARIS - Fundamental - Médio</title>
<link rel="stylesheet" href="estilo.css" media="screen and (min-width: 700px)">
<link rel="stylesheet" href="MOBILE.css" media="screen and (max-width: 700px)">
<link rel="stylesheet" href="max-500px.css" media="screen and (max-width: 500px)">
<link rel="stylesheet" href="max-300px.css" media="screen and (max-width: 300px)">
<link rel="stylesheet" href="min-150px.css" media="screen and (max-width: 150px)">
<!--- código para animação do site -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><metaname="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<!-- ----------------------------------------- PRIMEIRA PARTE -------------------------------------------------- -->
<header>
<h1> <a href="#" TARGET="_blank" ><img src="imagens/logo 264.png" title="Solaris" alt="Solaris"></a></h1>
<span class="menu-anchor"></span>
<menu class="navegacao" id="navegacao">
<ul><link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet">
<li><a href="#bloco2">O Solaris</a></li>
<li><a href="#bloco3">Projeto Pedagógico</a></li>
<li><a href="#bloco4">Matriz Curricular</a></li>
<li><a href="#bloco5">Estrutura</a></li>
<li><a href="#bloco6">Visite-nos</a></li>
</ul>
</menu>
<div><h3><link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet">Promover
o autoconhecimento <br> para desenvolver os potenciais <br> de cada indivíduo.</h3>
</div>
<div class="menina"> <img src='imagens/menina.png'>
</div>
</header>
<div class"container" style="background: #fff;">
<!-- --------------------------- SEGUNDA PARTE --------------------------------------------- -->
<div class="bloco2" id="bloco2">
<section class="divbloco2" id="divbloco2">
<h2><link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet">O Solaris</h2>
<p><link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">O Centro Educacional
Solaris se diferencia por pautar sua estrutura na Teoria das Inteligências
Múltiplas e nas competências socioemocionais. Utilizamos métodos de aprendizagem que desenvolvem
uma educação motivadora, promovem o autoconhecimento dos estudantes e incentivam a convivência
colaborativa. Tudo isso em um amplo espaço físico construído exclusivamente para receber este novo
conceito de ensino-aprendizagem. </p>
</section>
</div>
<!-- ---------------------------------- TERCEIRA PARTE ----------------------------------- -->
<div class="bloco3" id="bloco3">
<section class="divbloco3" id="divbloco3">
<h2>Projeto Pedagógico</h2>
<p>Nosso projeto pedagógico foi construído com base nos Objetivos de Desenvolvimento Sustentável da ONU
(Organização das Nações Unidas) para o milênio. Para isso, trabalhamos os seguintes pilares:
</p>
</section>
<div class="infografico">
<picture>
<source media='(max-width: 700px)' srcset='imagens/infografico-mobile.png'>
<source media='(min-width: 701px)' srcset='imagens/infografico.png'>
<img src='imagens/infografico.png'>
</picture>
</div>
<section class="divbloco3" id="divbloco3">
<h2>Currículo</h2>
<p> Clique para conhecer a matriz curricular.</p>
</section>
</div>
<!-- ---------------------------- QUARTA PARTE --------------------------------- -->
<div class="bloco4" id="bloco4">
<div class="parte1">
<div class="sessao">
<h2>FUNDAMENTAL I</h2>
<img src='imagens/triangulo-amarelo.png' id="triangulo-amarelo">
<div class="conteudo">
<div class="fund1">
<p id="texto-coluna1">
<font style='font-weight:bold;'>PERÍODO ACADÊMICO</font> <br> (7h20 às 13h00) <br>
<div class="lado">
<p id="texto-coluna2">
<font style='font-weight:bold;'> PERÍODO AMPLIADO </font>
</p>
</div>
</div>
</div>
</div>
<div class="parte2">
<div class="sessao">
<h2>FUNDAMENTAL II</h2>
<img src='imagens/triangulo-vermelho.png' id="triangulo-vermelho">
<div class="conteudo">
<p id="textofund2">Nesta etapa, os estudantes do 6º ano ao 9º ano vão explorar conteúdos
acadêmicos e alternativos para ampliar sua bagagem de conhecimentos múltiplos.
</p>
<div class="fund2">
<p id="texto-coluna3">
<font style='font-weight:bold;'>PERÍODO ACADÊMICO</font> <
</p>
</div>
<div class="lado2">
<p id="texto-coluna4">
<font style='font-weight:bold;'>Currículo</font>
</p>
</div>
</div>
</div>
</div>
<div class="parte3">
<div class="sessao">
<h2>ENSINO MÉDIO</h2>
<img src='imagens/triangulo-verde.png' id="triangulo-verde">
<div class="conteudo">
<p id="texto-ensmedio">
Nesta etapa, os estudantes da 1ª à 3ª série do Ensino Médio vão aprofundar
os conteúdos de acordo com o Exame Nacional do Ensino Médio (Enem).
</p>
<div class="primeira-parte">
<p id="texto-coluna5">
<font style='font-weight:bold;'>PERÍODO ACADÊMICO </font>
</p>
</div>
<div class="segunda-parte">
<p id="texto-coluna6">
<font style='font-weight:bold;'>Currículo</font>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- -------------------- QUINTA PARTE --------------------------- -->
<div class="bloco5" id="bloco5">
<section class="divbloco5" id="divbloco5">
<h2>Estrutura</h2>
</section>
<div class="carrossel">
</div>
<div class="imgestrutura">
<picture>
<source media='(max-width: 700px)' srcset='imagens/estrutura-mobile.png'>
<source media='(min-width: 701px)' srcset='imagens/estrutura.png'>
<img src='imagens/estrutura.png'>
</picture>
</div>
</div>
<!-- -------------------------- RODAPÉ ------------------------------------------ -->
<footer id="bloco6">
<div class="linha-diagonal">
<h2>Venha nos visitar</h2>
<p>Nosso prédio está passando por adaptações, mas estamos prontos para recebê-lo para apresentar nossa proposta pedagógica
e procedimentos de reserva de vaga para 2019.
</p>
<p>Para condições especiais de matrícula, preencha o formulário abaixo.</p>
<div>
<center><img src="imagens/logo 264.png" title="Solaris" alt="Solaris"></center>
<p> <font style='font-weight:bold;'>(11) 2564-3523 </font> </p>
<p> <font style='font-weight:bold;'>(11) 2564-3524 </font> </p>
<p id="email-escola"> [email protected] </p>
<p> Rua dos Canudos, 56 – Bairro Casa Branca <br> Santo André (SP) </p>
</div>
</div>
<img src="imagens/facebook.png" id="facebook" title="facebook" alt="facebook">
<img src="imagens/instagram.png" id="instagram" title="instagram" alt="instagram">
</footer>
</div>
</body>
</html>