1
resposta

O meu card some ao tentar colocar ao lado na resolução 1728px

Ola, ao criar a div class=carrossel__container e fechar ela la embaixo acima somente do section, logo apos ir no carrossel.css e adicionar a media, e colocar o display flex dentro da class o card sumiu na resolução 1728px.

<div class="carrossel__container">
        <div class="swiper">

            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide"> <img src="img/ApacheKafka.svg" alt="Livro sobre ApacheKafka"></div>
            <div class="swiper-slide"> <img src="img/Arquitetura.svg" alt="livro sobre arquitetura"> </div>
            <div class="swiper-slide"> <img src="img/Portugol.svg"alt="livro sobre portugol"></div>
            <div class="swiper-slide"> <img src="img/Liderança.svg"alt="livro sobre liderança"></div>
            <div class="swiper-slide"> <img src="img/Javascript.svg"alt="livro sobre javascript"></div>
            <div class="swiper-slide"> <img src="img/Tuning.svg"alt="livro sobre tuning"></div>

        </div>


    <div class="card">
        <div class="card__descricao">
            <div class="descricao">
                <h3 class="descricao__titulo">Talvez você também se interesse por...</h3>
                <h2 class="descricao__titulo-livro">Angular 11 e Firebase</h2>
                <p class="descricao__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
            </div>
            <img src="img/alura.svg" class="dscricao__imagem" alt="imagem alura">
        </div>


        <div class="card__botoes">
             <ul class="botoes">
                <li class="botoes__items"> <img src="img/Favoritos.svg"></li>
                <li class="botoes__items"> <img src="img/Compras.svg"></li>
            </ul>
                <a href="#" class="botoes__ancora"> Saiba mais</a>

        </div>

    </div>
</div>
 </section>
 @media screen and (min-width: 1728px){

    .carrossel__container{
        display: flex;
    }

}
1 resposta

Opa Rafael, tudo bom?

Analisando seu código percebi que faltou fechar a div da classe swiper, a última div antes dos nossos cards fechada é a do swiper-wrapper:

        <div class="swiper">

            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"> <img src="img/ApacheKafka.svg" alt="Livro sobre ApacheKafka"></div>
                <div class="swiper-slide"> <img src="img/Arquitetura.svg" alt="livro sobre arquitetura"> </div>
                <div class="swiper-slide"> <img src="img/Portugol.svg"alt="livro sobre portugol"></div>
                <div class="swiper-slide"> <img src="img/Liderança.svg"alt="livro sobre liderança"></div>
                <div class="swiper-slide"> <img src="img/Javascript.svg"alt="livro sobre javascript"></div>
                <div class="swiper-slide"> <img src="img/Tuning.svg"alt="livro sobre tuning"></div>

            </div> <!-- fecha swiper-wrapper-->


    <div class="card">

Caso isso não resolva, peço que por gentileza me envie o seu projeto completo. Dessa forma posso analisar o seu código na totalidade e simular o problema para ajudá-lo de forma mais assertiva.

Você pode compartilhar o link do seu projeto via Github.

Fico à disposição.

Tenha um bom dia e bons estudos.