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.
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!