0
A test site I created has huge spacing, I have no idea how to fix it, it’s not responsive at all. The problem is probably related to the HTML and CSS of the site. Follow both below (these are small codes). Follow the repository of github where the site is hosted: https://github.com/aulasdelivery/aulasdelivery.github.io and this is the link of the same: https://aulasdelivery.github.io/
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aulas Delivery</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/mavi.css">
<link rel="shortcut icon" href="img/icon.png">
</head>
<body>
<header>
<div class="container">
<img id="coruja" src="img/coruja.png" alt="coruja">
</div>
<div class="header-black">
</div>
<div class="container">
<nav id="menu" class="pull-left">
<li>Aulas Delivery - Reforço Escolar</li>
</nav>
</div>
</header>
<section>
<div class="info1">
<img id="info1" src="img/livro.png" alt="livro">
<p>Aulas independentes ou reforço escolar (plano mensal)</p>
</div>
<div class="info2">
<img id="info2" src="img/gongo.png" alt="relogio">
<p>Aulas independentes ou reforço escolar (plano mensal)</p>
</div>
<div class="info3">
<img id="info3" src="img/mochila.png" alt="aviao-papel">
<p>Aulas na casa do aluno (dependendo do local)</p>
</div>
<div id="materias">
<img src="img/materias.jpg" alt="materias">
</div>
<div id="imagemPerfil">
<img src="img/mavi.jpg" alt="mavi">
<h3>Maria Victoria Cabral</h3>
</div>
<div id="estrela1">
<img src="img/estrela.png" alt="estrela">
<h4>Estudante de Direito da Universidade Católica de Salvador.</h4>
</div>
<div id="estrela2">
<img src="img/estrela.png" alt="estrela">
<h4>Melhor professora!</h4>
</div>
<div id="estrela3">
<img src="img/estrela.png" alt="estrela">
<h4>Melhor professora!</h4>
</div>
<div id="contato">
<div class="container">
<div class="row">
<div class="col-md-4">
<ul><span>Contato -</span>
<li><h4>Celular - (71) 983485225</h4></li>
<li><a href="https://www.facebook.com/mariavictoria.cabral.3">Facebook</a></li>
<li><a href="https://www.facebook.com/mariavictoria.cabral.3">Instagram</a></li>
</ul>
</div>
<div class="col-md-4">
<ul><span>Biografia de aulas -</span>
<li><p>bla bla bla bla bla bla bla bla</p></li>
</div>
</div>
</div>
</div>
</section>
<script src = "lib/jquery/jquery.min.js"></script>
<script src = "lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
CSS:
@font-face{
font-family: 'IndieFlower';
src: url("../fonts/IndieFlower.ttf");
font-size: 1em;
}
header {
width: 100%;
height: 130px;
background-color: #FF9F80;
z-index: 2;
position: relative;
}
header .container {
position: relative;
}
header .header-black {
background-color: #FFC48C;
height: 30px;
}
header #coruja {
position: absolute;
top: 1px;
}
#menu{
margin: 30px 140px;
}
#menu li{
display: inline-block;
font-family: "IndieFlower";
color: #0B486B;
font-size: 30px;
padding: 0px 25px;
}
section{
background-color: #9DE0AD;
height: 1200px;
}
section .info1{
background-repeat: no-repeat;
position: relative;
top: 420px;
left: -820px;
}
section .info1 p{
font-size: 16px;
color: #490A3D;
display: inline-block;
font-family: 'IndieFlower';
font-weight: bold;
}section .info2{
background-repeat: no-repeat;
position: relative;
top: 420px;
left: 24px;
}
section .info2 p{
font-size: 16px;
color: #490A3D;
display: inline-block;
font-family: 'IndieFlower';
font-weight: bold;
}
section .info3{
background-repeat: no-repeat;
position: relative;
top: 420px;
left: 24px;
}
section .info3 p{
font-size: 16px;
color: #490A3D;
display: inline-block;
font-family: 'IndieFlower';
font-weight: bold;
}
#materias{
background-repeat: no-repeat;
position: relative;
top: -200px;
right: -830px;
}
#imagemPerfil{
[![inserir a descrição da imagem aqui][1]][1]
background-repeat: no-repeat;
position: relative;
top: -570px;
right: -50px;
}
#imagemPerfil h3{
font-size: 24px;
color: #490A3D;
font-family: 'IndieFlower';
font-weight: bold;
}
#estrela1{
background-repeat: no-repeat;
position: relative;
top: -915px;
right: -365px;
}
#estrela1 h4{
font-size: 16px;
color: #490A3D;
display: inline-block;
font-family: 'IndieFlower';
font-weight: bold;
}
#estrela2{
background-repeat: no-repeat;
position: relative;
top: -905px;
right: -365px;
}
#estrela2 h4{
font-size: 16px;
color: #490A3D;
display: inline-block;
font-family: 'IndieFlower';
font-weight: bold;
}
#estrela3{
background-repeat: no-repeat;
position: relative;
top: -895px;
right: -365px;
}
#estrela3 h4{
font-size: 16px;
color: #490A3D;
display: inline-block;
font-family: 'IndieFlower';
font-weight: bold;
}
#contato{
background-color: #5E299A;
width: 100%;
height: 400px;
}
#contato ul{
margin-top: 36px;
font-family: 'OpenSans';
}
#contato ul span{
color: #FDE092;
font-size: 24px;
}
#contato li a{
font-size: 19px;
}
#contato li h4{
color: #FDE092;
font-size: 19px;
}
#contato p{
font-family: 'OpenSans';
font-size: 19px;
color: #FDE092;
}
So, I understand your question, you have to see what is happening with the semantics because you already have the bootstrap, try to see if it is working the bootstrap and see its documentation too, in a matter of putting container and Row. Maybe this is the problem of the site being all misaligned.
– Nathan
@Nathan I removed the container and Row, and on the console does not specify anything if the bootstrap is not working
– user77896