Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Erro no Carousel em Desktops (≥1440px) - Curso Bootstrap boas práticas no fron end

Olá pessoal tudo bem,

Estou com um problema no carousel (depoimentos), após terminado o curso visualizando o site nas quatro dimensões que o Grid do bootstrap trabalha tudo certo, porém reparei que acima de 1440px aparece uma margem a direita, ou seja, fica um espaço sobrando e a imagem não preenche tudo.

Gostaria de saber se o site de vocês está ocorrendo o mesmo erro, ou se sabem como resolver e poderiam me ajudar.

Muito obrigado Abraço

6 respostas

Oi Robson, tudo certo?

Não cheguei a fazer esse curso (ainda), mas uma coisa que me ajuda com backgrounds gigantes é essa propriedade:

    background-size: cover;

Espero ter ajudado,

Abcs!

Oi professor Natan caramba você por aqui, curti muito seu curso de UX, estou aguardando o lançamento dos próximos.

Então sobre o erro tentei isso agora e não deu certo, já analisei se tem alguma coisa subscrevendo e nada, tava pensando no position: relative se está influenciando em algo, mas não sei se tem haver (o banner no topo do site foi colocado como position: absolute para servir de base para uma caixa de informações ). Bom vou continuar tentando aqui.

Muito obrigado pela ajuda, aprendi mais uma, com certeza será útil no futuro.

Abraço

Oi Robson,

Opa, estamos por aqui também!

Fico muito feliz que tenha gostado, lembro que você curtiu a revisão geral do curso. Obrigado mesmo!

O background-size a gente usava até aqui na Alura, mas no site antigo, dá um Inspect Element depois aqui que você consegue ver ele em ação. Ele é bem bacana mesmo.

Se quiser, coloca seu código todo em um Jsbin, aí consigo te ajudar nessa.

E se alguém ver antes de mim também claro!

Abcs!

Oi beleza professor, sim vi que era utilizado no site do Alura é uma mão na roda para esses casos de backgrounds gigantes mesmo, tava fazendo outro curso agora e o mesmo erro não completava toda a tela, utilizei e funcionou, magnífico. Agora sabe se lá porque não está funcionando nesse caso.

Sobre colocar no jsbin coloquei lá mais como o Add library tá meio desatualizado porque pega o jquery e bootstrap versão antiga daí não sei se vai sair tudo correto, mas segue abaixo o Github se o professor puder me ajudar a encontrar no que estou errando.

https://github.com/RobsonVinicius/Bootstrap_boas-praticas-front-end

Valeu abraço

Obrigado

solução!

Olá Robson. Também tive o mesmo problema que você, e resolvi da seguinte maneira:

No seu arquivo .CSS você deverá criar a classe .fill:

.fill{width:100%;height:100%;}

No seu arquivo .html deverá adicionar esta classe em CADA imagem do carrossel :

...código omitido...
<img class="fill" src="img/depoimentos/depo1.png" alt="Imagem do depoimento 1">

...código omitido...
<img class="fill" src="img/depoimentos/depo2.png" alt="Imagem do depoimento 2">

...código omitido...
<img class="fill" src="img/depoimentos/depo3.png" alt="Imagem do depoimento 3">

Encontrei esta solução procurando no google, e não sei se existe impacto no site aplicando esta classe. Segue o link de onde encontrei: http://startbootstrap.com/template-overviews/full-slider/

Valeu cara aprendi mais uma, funcionou de boa.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software