Entrar Ainda não tem acesso?
2
respostas

Meu card não fica ao lado do carrossel.

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Produzindo CSS no desktop e atividade Revisando o flexbox

por Ryan Pelais De Magalhães
| 19.3k xp | 3 posts
Analista de Suporte 
<section class="carrossel">
                        <h2 class="carrossel__titulo"> Novos lançamentos</h2>
                        <!-- Slider main container -->      
                <div class ="carrossel__container">         
                <div class="swiper">
                    <!-- Additional required wrapper -->
                    <!-- If we need pagination -->
                    <div class="swiper-pagination"></div>

                    <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide"><img src="IMG/ApacheKafka.svg" 
                        alt="Livro sobre ApacheKafka e spring boot da Alura books"></div>
                    <div class="swiper-slide"><img src="IMG/Liderança.svg" 
                        alt="Livro sobre liderança em desing da Alura books"></div>
                    <div class="swiper-slide"><img src="IMG/Javascript.svg"alt="Livro assertivo sobre Javascript da Alura books"></div>
                    <div class="swiper-slide"><img src="IMG/Guia Front-end.svg"alt="Livro sobre Front-end da Alura books"></div>
                    <div class="swiper-slide"><img src="IMG/Portugol.svg"alt="Livro sobre portugol da Alura books"></div>
                    ...
                
                    </div>
                    
                
                    <!-- If we need navigation buttons -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>

                <div class="card">
                    <!-- 1º linha -->
                    <div class="card__descrição">
                        <!-- 1º coluna -->
                        <div class="descrição">
                            <h3 class="descrição__titulo">Talvez voê tamebm, se interesse por...</h3>
                            <h2 class="descrição__titulo-livro">Angular 11 e Firebase</h2>
                            <p class="descrição__texto">Construindo uma aplicação intregada com a plataforma do Google.</p>
                        </div>
                        <!-- 2º coluna -->
                        <img src="IMG/Angular.svg" class="descrição__imagem">
                    </div>

                    <!-- 2º linha -->
                        <div class="card__botões">
                            <!-- 1º coluna -->
                            <ul class="botões">
                                <li class="botões__item"><img src="img/Favoritos.svg" alt="Favoritar livro"></li>
                                <li class="botões__item"><img src="img/Compras.svg" alt="Adicionar no carrinho de compras"></li>
                            </ul>
                            <!-- 2º coluna -->
                            <a href="#" class="botões__ancora">Saiba mais</a>
                        </div>
                    </div>
                </div>
                </section>
2 respostas
por Ryan Pelais De Magalhães
| 19.3k xp | 3 posts
Analista de Suporte

Codigo CSS

.carrossel__titulo{
    color: var(--laranja);
    background-color: var(--branco);
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    padding: 1em0 0 0.5em 0 ;
}
.swiper-slide IMG{
    width: 100%;
}
.swiper-button-prev, .swiper-button-next{
    display: none;
}
.swiper-pagination{
    position: initial;
    margin: .5em 0;
}
.card__descrição {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5em;
}

.card__botões {
    display: flex;
    justify-content: space-between;
}
.botões{
    display: flex;
}
.card {
  background: var(--branco);
  box-shadow: 0px 4px rgba(0,0,0,0.25);
  border-radius: 10px;
  margin: 1em;
  padding: 1em;

}
.descrição__titulo {
    color: var(--laranja);
    font-weight: 700;
}
.descrição__titulo-livro {
    color: var(--azul);
    font-weight: 700;
    font-size: 18px;
    margin: 0.5em 0;
}
.descrição__texto {
    font-size: 14px;

}
.botões__ancora {

    background-color: var(--laranja);
    padding: 1em 2.2em;
    color: var(--branco);
    font-weight: 700;
    text-decoration: none;
    
}
@media screen and (min-width:1024px){
    .carrossel__titulo{
        font-size: 26px;
    }
    
    .swiper-pagination{
        margin: 2em 0 3em 0;
    }
    .swiper{
        width: 60%;
    }
    .swiper-button-prev, .swiper-button-next{
        display: block;
        top: 60%;
    }
    .card{
        width: 40%;
        margin: 2em auto;
    }
}

@media screen and(min-width: 1728px) {
    .carrossel__container{
        display: flex;
        
    }
}
por Victor Costa Santos
| 1937k xp | 3733 posts
Alura Scuba Team Monitor de ForumOps

Olá!

Aparentemente é um erro é simples.

Faltou você dar um espaço entre "and" e "(min-width: 1728px)".

Seu código:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Código da aula:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Observe que o "And" até trocar de cor, faça o mesmo e verifique se funciona:

@media screen and (min-width: 1728px) {
    .carrossel__container {
        display: flex;
        margin: 0 20vw 3em 20vw;
        align-items: center;
    }
}

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!