Ir ao conteúdo
  • Cadastre-se
Regras do Clube do Hardware

HTML Espaço em branco no layout da tela e barra horizontal no site

Michellly

Por Michellly
em Web e banco de dados

 Compartilhar
Ir à solução Resolvido por joseph_dev,

Posts recomendados

Michellly
 

Michellly

Postado
Postado

Olá, estou desenvolvendo meu primeiro site e estou usando grid do bootstrap, deixei o width 100% mas meu site ficou com um espaço em branco do lado direito da tela obrigando a usar a barra horizontal, mesmo tirando a barra horizontal com overflow-x: hidden, não resolve pois o espaço em branco continua. Podem me ajudar a entender o que eu fiz de errado?

Segue o html: 


<body>

        

        <!-- TOPO -->

    <header>    

       <div class="row" id="topo">

                <div class="col-9">

                    <form>

                        <div class="input-field" id="barrabusca">

                            <input id="search" type="search" required placeholder="Pesquisar item">

                            <a href="#" target="blank" title="Pesquisar"><i class="fa fa-search fa-lg" aria-hidden="true" style="color: #fff"></i></a>



                        </div>

                    </form>         

                </div>



                <div class= "col-3 right-align" id="redessociais">

                    <a href="https://www.instagram.com/smaydoces/" target="blank" title="Instagram" class="btn transparent btn-floating instagram"><i class="fa fa-instagram fa-lg" style="color: #fff"></i></a>

                    <a href="https://api.whatsapp.com/send?phone=5511949214151&text=Ol%C3%A1%2C%20gostaria%20de%20saber%20mais%20sobre%20o%20Smay%20Doces" target="blank" title="Whatsapp" class=" btn transparent btn-floating whatsapp"><i class="fa fa-whatsapp fa-lg" style="color: #fff"></i></a>

                    <a href="#" target="blank" title="Login Adm" class="btn transparent btn-floating login"><i class="fa fa-user-circle fa-lg" style="color: #fff" aria-hidden="true"></i></a>

                </div>

        </div>

    </header>          




        <!-- MENU -->

        <div class="d-none d-lg-block">

            <div class="row" id="menu" style="position: absolute;">

                <div class="col-10">

                    <ul class="nav nav-tabs">

                        <li class="nav-item">

                            <a class="nav-link active" href="index-home.html">Home <i class="fa fa-home" aria-hidden="true"></i></a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link" href="sobre.html">Conheça o Smay Doces</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link" href="menu.html">Menu</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link" href="contato.html">Contato</a>

                        </li>

                        <li class="nav-item">

                            <a class="nav-link" href="#">Meus pedidos <i class="fa fa-shopping-bag" aria-hidden="true"></i></a>

                        </li>

                    </ul>

                </div>

                                

                <div class="col-2" id="logo">

                    <a href="index-home.html"><img class="logo" src="img/Logo-smaydoces.png" alt="Smay Doces"></a>

                </div>

            </div>

        </div>



    <div class="d-lg-none">

        <nav class="navbar navbar-expand-lg navbar-light" style="background-color:transparent;">

            <a class="navbar-brand" href="#"> <a href=""><img class="logo" src="img/Logo-smaydoces.png" alt="Smay Doces"></a></a>

            <button class="navbar-toggler"  style="background-color: #C69C6D" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado" aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação">

                <i class="fa fa-bars" aria-hidden="true" style="color: #fff;"></i>

            </button>



            <div class="collapse navbar-collapse" id="conteudoNavbarSuportado">

                <ul class="navbar-nav mr-auto">

                    <li class="nav-item">

                        <a class="nav-link active" href="index-home.html">Home <i class="fa fa-home" aria-hidden="true"></i></a>

                    </li>

                    <li class="nav-item">

                            <a class="nav-link" href="sobre.html">Conheça o Smay Doces</a>

                    </li>

                    <li class="nav-item">

                            <a class="nav-link" href="menu.html">Menu</a>

                    </li>

                    <li class="nav-item">

                            <a class="nav-link" href="contato.html">Contato</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link" href="#">Meus pedidos <i class="fa fa-shopping-bag" aria-hidden="true"></i></a>

                    </li>

                </ul>

            </div>



        </nav>



    </div>



    

    <!-- HOME -->

   <section class="home bloco scrollspy" id="home">  

        <div class="container banner">

            <div class="col-12">

                <h2 class="animate__animated animate__backInUp animate__delay-1s">Smay Doces Informa: Suas definições de sobremesas foram atualizadas!</h2>

                <p class="animate__animated animate__fadeInDown animate__delay-2s" id="banner">Entregas: Suzano, Mogi e Poá - Pedidos 24 horas antes.</p>

                <div class="row justify-content-center">

                    <button type="button" class="btn btn-danger">Peça já! <i class="fa fa-shopping-bag" aria-hidden="true"></i></button>

                </div> 

        </div>

</section>



<section class="depoimentos bloco scrollspy" id="depoimentos">

    <div class="row justify-content-center">

        <h2>Depoimentos:</h2>

    </div>

    

    <div class="row justify-content-center">

        <div class="col-10 col-md-4">

            <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">

                <div class="carousel-inner">

                <div class="carousel-item active">

                    <i class="fa fa-quote-left fa-3x fa-pull-left fa-border" style="color: #fff;" aria-hidden="true"><p id="carousel"> Muito bom! É super leve e não é doce enjoativo <img src="./img/emoji_palmas.png"></p>

                    </i>

                </div>

                <div class="carousel-item">

                    <i class="fa fa-quote-left fa-3x fa-pull-left fa-border" style="color: #fff;" aria-hidden="true"><p id="carousel">Não sabia da existência desse doce, mas ainda bem que arrisquei, gostei demais <img src="./img/emoji_palmas.png"></p>

                    </i>

                </div>

                <div class="carousel-item">

                    <i class="fa fa-quote-left fa-3x fa-pull-left fa-border" style="color: #fff;" aria-hidden="true"><p id="carousel">Estou literalmente sem palavras, melhor sobremesa que já comi.</p>

                    </i>

                </div>

                <div class="carousel-item">

                    <i class="fa fa-quote-left fa-3x fa-pull-left fa-border" style="color: #fff;" aria-hidden="true"><p id="carousel">Super recomendo! Apaixonada nesse Modoffee. Se está a procura de um doce diferente e de muita qualidade,<br>@smaydoces é o lugar certo! <img src="./img/emoji_coracao.png"> <img src="./img/emoji_palmas.png"></p>

                    </i>

                </div>

                </div>

            </div>

        </div>

    </div> 

    <div class="row justify-content-center">

        <a href="https://www.instagram.com/smaydoces/" target="blank" title="Instagram" class="btn btn-danger">Veja mais <i class="fa fa-instagram fa-lg"></i></button></a>

    </div>



</section>

 

E segue o CSS: 

* {padding: 0; margin: 0; border: 0; box-sizing: border-box;}



html, body {height: 100%; width: 100%;}

.bloco {width: 100%;min-height: 100%; padding-top: 94px;}




/* CABEÇALHO */

header {width: 100%; height: 40px; background-color: #C69C6D;}

#search {border: 0; background: #C69C6D; height: 40px; width: 50%; margin-left: 0.5%; margin-right: 0.5%; vertical-align: top;}

#search:active {border: 0; background-color: rgba(10,23,55,0.2);}

#search:hover {border: 0; background-color: rgba(10,23,55,0.2);}

#redessociais {display: flex; justify-content: flex-end; align-items: center;}

#barrabusca {display: flex; justify-content: flex-start; align-items: center;}



/* MENU */

.nav-link {color:#42210B; font-weight: 100;font-family: 'Lato', sans-serif;font-size: 1.1rem; margin-top: 2px; margin-left: 5px;}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {color:#BE0204; font-weight: 100;font-family: 'Lato', sans-serif;font-size: 1.1rem;}

.navbar-light .navbar-nav .nav-link {color: #42210B;}

.navbar-light .navbar-nav .nav-link.active {color:#BE0204;}

.nav-link:hover {color: #BE0204;}



 /* LOGO*/

#logo {display: flex; justify-content: flex-end; align-items: center;}

.logo {vertical-align: middle; border-style: none; margin-top: -7px;}



/* HOME */

.home {animation: mudarbg 20s infinite; background-image: url('../img/banner_1.png'); background-repeat: no-repeat;

    background-size:cover; width: 100%;}

    .banner h2 {text-align: center;text-shadow: 2px 2px #42210B;font-family: 'Lato', sans-serif; margin-top:30% ;font-size: 1.5rem; font-weight: 900; text-transform: uppercase; color:#fff;}

    .banner p {text-align: center;font-size: 1.2rem; line-height: 1.5rem;  color:#42210B; font-weight: 600; font-family: 'Roboto', sans-serif;}

    .btn-danger {background-color: #BE0204; border-color: #BE0204; margin-top: 1%;}

    .btn-danger:hover {background-color: #000; border-color: #000;}




    

    /* HOME - ANIMATION */

    @keyframes mudarbg {

        20%  {background-image: url('../img/banner_4.png');}

        40%  {background-image: url('../img/banner_2.png');}

        60% {background-image: url('../img/banner_5.png');}

        80% {background-image: url('../img/banner_4.png');}

        100% {background-image: url('../img/banner_6.png');}



    }



    /* HOME - DEPOIMENTOS */

.depoimentos{background: #C69C6D; min-height: 400px;}

.depoimentos img {width: 20px; margin-top: 10px;}

#carousel {font-family: 'Roboto', sans-serif;text-align: center;font-size: 1.2rem; line-height: 1.5rem;  color:#fff; font-weight: 500;text-shadow: 1px 1px #42210B;} 

h2{font-family: 'Lato', sans-serif; font-size: 1.5rem; color: #42210B;padding-bottom: 0.5%;}




   /* RODAPE */

.rodape {background-image: url(../img/textura2.png); padding: 15px;}

.rodape p {font-family: 'Lato', sans-serif; color: #fff; font-size: 1.1rem;}

.rodape a {font-size: 1rem; color: #fff; font-family: 'Roboto', sans-serif;}

.col-4 {display: flex; justify-content: center; align-items: center; border-bottom: 1px solid#fff;}

.rodape li {list-style: none;}

.col-6 {display: flex; justify-content: center; align-items: center; padding-top: 15px;}

#copy{font-family: 'Roboto', sans-serif; color: #fff; font-size: 1rem; text-align: center;}

#dev{font-family: 'Roboto', sans-serif; color: #fff; font-size: 0.9rem;}



.voltar-topo {background: #C69C6D; display: flex; justify-content: flex-end; z-index: 4; perspective-origin: -50px -50px; }

        



    /* MEDIA */

    @media (max-width: 576px) {

        .banner h2 {margin-top: 70% ; font-size: 1.2rem;}

        .banner p {font-size: 1.1rem;}

    }


 

Link para o comentário
Compartilhar em outros sites
joseph_dev
 

joseph_dev

Postado
Postado

Faça um teste colocando todo seu código dentro de uma div com a classe "container". Da seguinte forma: 

...
<body>
  <div class="container">
    <!--Seu código fica todo aqui-->
  </div>
</body>
...

Segundo a documentação do bootstrap, esse container ajusta automaticamente seu conteúdo as dimensões da tela tornando o site responsivo.

 

Teste também a classe "container-fluid". No lugar de "container" coloque "container-fluid". Segundo a documentação, esse container ajusta automaticamente seu conteúdo a largura total da tela. Obviamente, o responsivo é melhor.

Link para o comentário
Compartilhar em outros sites
  • Solução
joseph_dev
 

joseph_dev

Postado
  • Solução
Postado

Ao invés de usar css para customizar sua tela, use as tags e as classes do bootstrap e suas variações de classes para organizar ela. Use o css apenas para o excepcional mesmo. Isso vai ajudar na responsividade. Pela estrutura do seu site, dá para fazer quase tudo sem css. Qual versão do bootsrap você tá usando?

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...

Ebook grátis: Aprenda a ler resistores e capacitores!

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!