1

O banner do meu site esta rodando bem em monitor de até 15 polegadas. De resoluções acima destas os banners ficam muito grandes e geram barra horizontal no site. Como na imagem a seguir: [![https://i.sstatic.net/gwK2Z.jpg][1]][1]

Segue o código

html:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class=""></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2" class=""></li>
  </ol>
  <div class="carousel-inner slides">
    <div class="carousel-item">
      <img src="img/slider1.jpg" class="d-block w-100 slides" alt="...">
      <div class="carousel-caption">
          <h3>Criação de Sites</h3>
        </div>
    </div>
    <div class="carousel-item active">
      <img src="img/slider2.jpg" class="d-block w-100 slides" alt="...">
      <div class="carousel-caption">
          <h3>Design para Web</h3>
    </div>
    </div>
    <div class="carousel-item">
      <img src="img/slider3.jpg" class="d-block w-100 slides" alt="...">
      <div class="carousel-caption">
          <h3>Redes Sociais</h3>
    </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Anterior</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Próximo</span>
  </a>
</div> 


css:


body {
  overflow-x: hidden;
  padding-top: 75px;
}


.slides {
    width: 100vw;
}

#carouselExampleIndicators {
    max-width: 100vw;
    overflow-x: hidden;
}

12
  • Aqui esse código funcionou normal sem a barra de rolagem!
    – hugocsl
    Commented 14/05/2019 às 15:17
  • qual a resolução e polegadas do seu monitor? em monitores grandes por site de teste aparece com barra horizontal whatismyscreenresolution.net/multi-screen-test?site-url=https://… porém pelo console do google chrome aparece normal em todas resoluções, Já nestes sites de teste de resolução, quando o monitor é maior que 15 polegadas sempre aparece barra horizontal Commented 14/05/2019 às 16:37
  • Olha ai como está aqui, sem barra Horizontal imgur.com/jsknuHe vc tem o link do site que está com o problema?
    – hugocsl
    Commented 14/05/2019 às 16:41
  • Sim o link é mdwebdesign.tk Commented 14/05/2019 às 16:54
  • 1
    Ok Hugo Obrigado Commented 17/05/2019 às 12:11

1 Resposta 1

0

Conforme resolvido no comentário seu problema é que vc colocou o Carrossel dentro de um Container com um Row dentro.... Na verdade nesse caso o carrossel não deve ficar "envolto" pela tag do container ou row. O Caroucel deve estar fora dessas tags, direto no body, Ou então tire a classe container-fluid da section, e a classe row da div de fora do Carrossel.

Tano o .container quanto o .row, possuem margind e paddings que se somam ao slider causando esse problema do scroll horizontal, pois isso vc deve deixar o carrossel fora dessas tags, pare que ele ocupe 100% da largura da tela, mas sem somar padding ou margin neles.

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .