1
I have this page, that I put the height of the page in 100VH, to occupy the entire screen, but it is generating these white spaces at the bottom and side, and this is making appear scrollbars, I do not know why.
HTML and CSS structure ( SASS ):
.wrapper{
height: 100vh;
}
.background {
background: linear-gradient(to bottom right, rgba(0, 47, 75, .6), rgba(177, 28, 23, .5)), url("../imgs/backpizza.jpg") no-repeat center;
background-size: cover;
}
.logo {
margin-bottom: 1rem;
.col-auto {
padding: 0.3rem;
}
img {
width: 6rem;
}
h4{
color: snow;
font-size: 2rem;
font-style: italic;
}
}
/*.row .verticalalign{
height: 100vh;
}*/
.headline h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 3.5rem;
letter-spacing: 12px;
line-height: 48px;
font-weight: 700;
@include media-breakpoint-down(lg){
font-size: 2.3rem;
letter-spacing: 6px;
line-height: 20px;
padding-bottom: 1rem;
}
}
.btnbottom {
position: absolute;
left: 0;
right: 0;
//background-color: $red !important;
margin-left: auto;
margin-right: auto;
width: 300px;
bottom: 0;
font-size: 0.9rem;
padding: .3rem;
@include border-bottom-radius(0);
@include media-breakpoint-down(lg){
display: none;
}
}
.card {
//@include box-shadow(0 1px 3px rgba(0,0,0,0.12));
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
//transition: all 0.3s cubic-bezier(.25,.8,.25,1);
&:hover {
//box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.card-img-top {
height: 100px;
object-fit: cover;
@include border-top-radius($border-radius);
}
.card-body {
padding: .3rem;
.rowphone, .rowaaddresses {
color: $gray-800;
}
.card-title {
margin-bottom: .3rem;
font-weight: 700;
color: $red;
font-size: 1.4rem;
text-align: center;
}
hr {
margin-top: .1rem;
margin-bottom: .1rem;
border: 0;
border-top: 1.2px solid $gray-600;
}
}
.card-footer .btn {
@include border-top-radius(0);
padding: .275rem;
}
}<body>
<div class="wrapper background text-center">
<header>
<nav class="row justify-content-center logo">
<!-- era div no lugar de nav-->
<div class="col-auto align-self-center">
<h4>Pizza</h4>
</div>
<div class="col-auto">
<img src="../assets/imgs/pizzalogo.png">
</div>
<div class="col-auto align-self-center">
<h4>Vix</h4>
</div>
</nav> </header>
<div class="wrapper-content">
<!--<section>
<div class="cover">
<header>
<div class="container">
</div>
</header>
</div>
</section>-->
<section class="block-content row align-items-center">
<div class="container">
<header>
<div class="mx-auto headline">
<h1>As Melhores</h1>
<h1>Pizzarias</h1>
<h1>da Grande Vitória</h1>
</div> </header>
<div class="card-deck px-5">
<div class="card">
<img class="card-img-top border-bottom border-primary" src="../assets/imgs/braz-pizzaria.jpg">
<div class="card-body">
<h5 class="card-title">Pizzaria 1</h5>
<hr class="ml-3 mr-3">
<div class="rowphone px-3 my-2">
<div class="position-absolute">
<i class="fas fa-phone fa-lg" data-fa-transform="flip-h"></i>
</div>
<div>
<h6 class="card-text text-center font-weight-bold">(27) 3974-5134</h6>
</div>
</div>
<div class="rowaaddresses px-3 my-2">
<div class="position-absolute">
<i class="fas fa-map-marker-alt fa-lg"></i>
</div>
<div>
<h6 class="card-text text-center font-weight-bold ">Av. Rio Branco, 375</h6>
</div>
</div>
</div>
<div class="card-footer p-0">
<button class="btn btn-primary btn-block">Saiba Mais</button>
</div>
</div>
<div class="card">
<img class="card-img-top border-bottom border-primary" src="../assets/imgs/braz-pizzaria.jpg">
<div class="card-body">
<h5 class="card-title">Pizzaria 1</h5>
<hr class="ml-3 mr-3">
<div class="rowphone px-3 my-2">
<div class="position-absolute">
<i class="fas fa-phone fa-lg" data-fa-transform="flip-h"></i>
</div>
<div>
<h6 class="card-text text-center font-weight-bold">(27) 3974-5134</h6>
</div>
</div>
<div class="rowaaddresses px-3 my-2">
<div class="position-absolute">
<i class="fas fa-map-marker-alt fa-lg"></i>
</div>
<div>
<h6 class="card-text text-center font-weight-bold ">Av. Rio Branco, 375</h6>
</div>
</div>
</div>
<div class="card-footer p-0">
<button class="btn btn-primary btn-block">Saiba Mais</button>
</div>
</div>
<div class="card">
<img class="card-img-top border-bottom border-primary" src="../assets/imgs/braz-pizzaria.jpg">
<div class="card-body">
<h5 class="card-title">Pizzaria 1</h5>
<hr class="ml-3 mr-3">
<div class="rowphone px-3 my-2">
<div class="position-absolute">
<i class="fas fa-phone fa-lg" data-fa-transform="flip-h"></i>
</div>
<div>
<h6 class="card-text text-center font-weight-bold">(27) 3974-5134</h6>
</div>
</div>
<div class="rowaaddresses px-3 my-2">
<div class="position-absolute">
<i class="fas fa-map-marker-alt fa-lg"></i>
</div>
<div>
<h6 class="card-text text-center font-weight-bold ">Av. Rio Branco, 375</h6>
</div>
</div>
</div>
<div class="card-footer p-0">
<button class="btn btn-primary btn-block">Saiba Mais</button>
</div>
</div>
</div> </div>
</section>
<button class="btn btn-primary btnbottom text-uppercase">Conheça mais</button>
</div>
</div>
<script src="/assets/_jquery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="/assets/_fontawesome/fa-solid.min.js">
<link rel="stylesheet" href="/assets/_fontawesome/fontawesome.min.js">
<script src="/assets/js/scrollsmooth.js"></script>
</body>
</html>
was that right, the negative margins of -15 on Row, also works to use no-glutters
– Igor Oliveira
@Igoroliveira "and already check, problems with margins and padding is not - Igor Oliveira 13 hours ago" :)
– Valdeir Psr