Solucionado
Boa tarde. A segunda imagem dos depoimentos tem tamanho menor que as outras, gerando um espaço em branco na exibição e fazendo com que a página se adapte. Como resolver? Obrigado.
Link do código: https://github.com/brunochan/aulabootstrap/blob/master/c%C3%B3digo%20da%20aula
hoje, com a Alura e o Google Gemini
Fala ai Bruno, tudo bem? Obrigado por compartilhar parte do projeto, posso te pedir um favor? Consegue subir o projeto completo? Assim eu consigo simular o problema por aqui e analisá-lo com mais calma.
Fico no aguardo.
Fala ai Bruno, tudo bem? Dei uma olhada no projeto, nesse caso, você pode aplicar um width: 100% no item do carousel:
.carousel-inner .item {
width: 100%;
}Dessa forma você garante que todas as imagens irão ocupar a tela inteira.
Porém, em alguns casos pode acontecer da imagem perder resolução e esticar, você pode resolver com o object-fit, ficando:
.carousel-inner .item {
object-fit: cover;
width: 100%;
}Espero ter ajudado.
Oi, Matheus. Adicionei o código no css, mas não resolveu. Cada imagem tem um tamanho e a página fica se ajustando. Vou atualizar o projeto no git para que possa ver. Obrigado.
Fala ai Bruno, estranho, eu testei aqui com esse ajuste e tinha dado certo.
O projeto no Github está atualizado? Assim eu baixo aqui e testo novamente, posso ter deixado passar algum detalhe.
Abraços.
Boa tarde, Matheus. Atualizei o projeto no Github. https://github.com/brunochan/aulabootstrap
Obrigado.
Fala Bruno, dei uma olhada aqui no projeto e na verdade eu falei errado pra tu, você precisa aplicar o width: 100% na img filha do .item, ficando:
.carousel-inner .item img {
object-fit: cover;
width: 100%;
}Espero ter ajudado e desculpa a má informação e confusão da minha parte.
Boa noite, Matheus.
Não deu certo também :( Tentei usar a classe acima da "carousel-inner"., mas também não deu. O que funcionou, em parte, é estabelecer um "height" fixo, mas assim não dá certo para os outros tamanhos de tela.
Fala ai Bruno, tudo bem? Aqui para mim as imagens ficam estão ocupando a largura total da página.
No caso da altura mudar de tamanho, no mesmo estilo que tu aplicou o width: 100% você pode definir um height fixo (igual você mesmo falou).
Mas, em vez de utilizar px que seria uma medida exata e ruim para responsividade, você pode utilizar % ou vh (recomendo vh).
Espero ter ajudado.
Boa tarde, Matheus.
Ok, deu certo com o "vh". Em telas maiores ele acaba cortando um pouco das imagens, por ter uma altura limitada, mas acho que a solução é essa mesmo. E uso um @media mudando o "height" para as telas maiores.
Muito obrigado por toda ajuda. Abraço.
Que bom Bruno, fico feliz que tenha dado certo.
Sempre que precisar não deixe de criar suas dúvidas.
Abraços e bons estudos.