As imagens do carrossel estão ocupando a largura inteira, tanto na tela de tablet quanto a de desktop, o de desktop acaba até sendo pior porque a imagem fica bem maior.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
As imagens do carrossel estão ocupando a largura inteira, tanto na tela de tablet quanto a de desktop, o de desktop acaba até sendo pior porque a imagem fica bem maior.
Fala, Gustavo! Tudo bom?
Provavelmente é alguma coisa com relação ao width do container de imagens ou das próprias imagens em si. Segue o meu código do curso, pra você dar uma olhada e vê se encontra algo que está diferente do seu e possa estar causando o problema:
.carrossel__titulo{
background-color: var(--branco);
color: var(--laranja);
text-align: center;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
padding: 1em 0 0.5em 0;
}
.swiper-slide img{
width: 100%;
}
.swiper-button-next, .swiper-button-prev{
display: none;
}
.swiper-pagination{
position: initial;
margin: 0.5em 0;
}
/*CARD*/
.card{
background-color: var(--branco);
box-shadow: rgba(0, 0, 0, 0.25);
border-radius: 10px;
margin: 1em;
padding: 1em;
}
.card__descricao, .card__buttons{
display: flex;
justify-content: space-between;
}
.card__descricao{
margin-bottom: 0.5em;
}
.descricao__titulo{
color: var(--laranja);
font-weight: 700;
}
.descricao__titulo_livro{
color: var(--azul);
font-size: 18px;
font-weight: 700;
margin: 0.5em 0;
}
.descricao__texto{
font-size: 14px;
}
.buttons{
display: flex;
}
.buttons__ancora{
background-color: var(--laranja);
padding: 1em 2.2em;
color: var(--branco);
font-weight: 700;
text-decoration: none;
}
.descricao__estrelas{
margin-bottom: 0.5em;
}
@media screen and (min-width: 1024px){
.carrossel__titulo{
font-size: 26px;
padding: 2em 0 1em 0;
}
.swiper-pagination{
margin: 1.5em 0 3em 0;
}
.swiper{
width: 60%;
}
.swiper-button-next, .swiper-button-prev{
display: block;
top: 60%;
}
.card{
width: 40%;
margin: 2em auto;
}
}
@media screen and (min-width: 1728px){
.carrossel__container{
display: flex;
align-items: center;
margin: 0 15vw 3em 15vw;
}
.swiper-pagination{
margin: 1em 0;
}
.swiper{
width: 50%;
}
.card{
width: 60%;
margin-left: 3em;
}
.descricao{
margin-right: 2em;
}
.descricao__titulo{
font-size: 32px;
}
.descricao__texto{
font-size: 16px;
}
}
Manda seu código depois também, caso não resolva o seu problema, pra gente dar uma olhada e tentar te ajudar.
Abraços!
Oi Lury, meu problema era que eu havia escrito "width" errado, já tinha resolvido há algum tempo, mas mesmo assim obrigado por me ajudar.
Abraços!