0
Friends devs, my screen does not get responsive for small and extra small devices (Sm and Xs), appears a white sidebar on the direct side of the screen and that as the screen decreases more, the bigger it gets (the bar), taking up to half the screen on very small devices. Follow the code, sorry if I didn’t do it correctly, first question published.
<!DOCTYPE html>
<html>
<head>
<title>Efeito Parallax</title>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale = 1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilo.css">
<!-- Icones -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<!-- Fontes -->
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<!-- Galeria de fotos -->
<link rel="stylesheet" type="text/css" href=" https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css">
<style type="text/css">
.header-site{
background-image: url(img/a.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color: #ffffff;
padding-top: 300px;
padding-bottom: 300px;
width: 100%;
}
.content-site{
padding-top: 200px;
padding-bottom: 200px;
}
.img-site {
background-image: url(img/a.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
padding-top: 200px;
padding-bottom: 200px;
}
</style>
</head>
<body>
<!-- MENU - NAV - HEADER -->
<section class="header-site">
<div class="container">
<div class="row">
<div class="col-sm-12 col-xs-12">
<h1 class="text-center">BEM-VINDO</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, rerum sed necessitatibus architecto velit ipsum, iste, natus aut omnis pariatur fugit. Quam facilis illo minima corporis dolorum in qui quidem.
</p>
<p class="lead text-center">
<a href="#" class="btn btn-danger">Encomende</a>
</p>
</div>
</div>
</div>
</section>
<section class="content-site">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="text-center">Fusce campe titulo ahahaha </h1>
<p class="text-center"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta alias, quas optio sed repellat, aperiam deleniti hic error fugit aliquid tenetur reprehenderit et dolor dolores, iusto repellendus officia? Odit, officiis.</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="img-thumbnail">
<img src="https://i.stack.imgur.com/iPjIi.jpg">
<div class="caption text-center"></div>
<h3>supendise Amaoroso</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus reiciendis iste, aut laborum, id veritatis minus rerum fugiat cumque autem optio amet? Omnis provident aperiam aliquam reiciendis at, eligendi odio.</p>
</div>
</div>
<div class="col-sm-4">
<div class="img-thumbnail">
<img src="http://placehold.it/340x250">
<div class="caption text-center"></div>
<h3>supendise Amaoroso 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus reiciendis iste, aut laborum, id veritatis minus rerum fugiat cumque autem optio amet? Omnis provident aperiam aliquam reiciendis at, eligendi odio.</p>
</div>
</div>
<div class="col-sm-4">
<div class="img-thumbnail">
<img src="http://placehold.it/340x250">
<div class="caption text-center"></div>
<h3>supendise Amaoroso 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus reiciendis iste, aut laborum, id veritatis minus rerum fugiat cumque autem optio amet? Omnis provident aperiam aliquam reiciendis at, eligendi odio.</p>
</div>
</div>
</div>
</div>
</section>
<section class="img-site">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="text-center">CONTRATE AGORA</h1>
<p class="lead text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, rerum sed necessitatibus architecto velit ipsum, iste, natus aut omnis pariatur fugit. Quam facilis illo minima corporis dolorum in qui quidem.</p>
</div>
</div>
</div>
</section>
<section class="footer-site">
<div class="container">
<div class="row">
<div class="col-sx-12">
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dignissimos labore quod! Ducimus vero illum magnam laborum nesciunt molestias provident, aut veritatis nostrum cum deserunt, voluptatibus, pariatur culpa voluptate suscipit.</p>
</div>
</div>
</div>
</section>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Hi Hugo, great guy, solves the problem of cards. But I confess that this was not the biggest problem but the background image of the initial screen. Maybe it doesn’t look good in the image, but it’s a Parallax effect, it could just be a fixed background image too, but when I lower the screen a white bar appears only on the right side and it gets bigger proportions.
– Lucas Mendes Ribeiro
@Lucasmendesribeiro guy here I could not simulate this your problem, even on very narrow screens this does not happen. Have you published this code somewhere where to see this problem? Look here in this Codepen that will not have this problem happening https://codepen.io/hugocsl/pen/oNvavBN look there
– hugocsl
Actually @hugocsl does not appear in this editor. Strange to appear with the image I printed, but I will go up on the server and see how it looks on my phone. I appreciate your help friend!
– Lucas Mendes Ribeiro
@Lucasmendesribeiro cool young, qq doubt I am in the area, if you think that helped you somehow an up is welcome
– hugocsl