2
respostas

[Dúvida] altura do carrosel e categoria não aparece

O meu carrossel deu um bug, estava com o a altura maior do que a da imagem e isso estava espaçando o carrossel dos cards. Tentei usar height na classe swipper-wrapper mas talvez tenha sido isso que tenha acabado com a responsividade. fora que, meu notebook tem a tela menor que 1728 e o navegador não permite usar esse número de px nem para teste então não tinha ideia de como estava ficando, só segui as instruções. Fora isso o menu categorias não está aparecendo no header, somente favoritos e minha estante. E ele está com display flex para versão desktop. Segue o código do carrossel:


.cabeçalho__menu-hamburguer {
    width: 24px;
    height: 24px;
    background-image: url("../img/Menu.svg");
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
}

.container__botao:checked~.container__rotulo>.cabeçalho__menu-hamburguer {
    background-image: url("../img/menu_branco.svg");
}

.container__botao:checked~.container__rotulo {
    background: var(--azul-degrade);
}

.cabeçalho {
    background-color: var(--branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

}

.container {
    display: flex;
    align-items: center;
}

.container__imagem {
    padding: 1em;
}

.lista-menu {
    display: none;
    position: absolute;
    top: 100%;
    width: 60vw;
}

.container__botao:checked~.lista-menu {
    display: block;
}

.lista-menu__titulo,
.lista-menu__item {
    padding: 1em;
    background-color: var(--branco);
}

.lista-menu__titulo {
    color: var(--laranja);
    font-weight: 700;
}

.lista-menu__link {
    background: var(--azul-degrade);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
}

.container__botao,
.container__titulo,
.opcoes,
.container__texto { 
    display: none;
}


@media screen and (min-width: 1024px) {

    .container__titulo, .container__titulo-negrito {
        font-family: var(--fonte-secundaria);
        font-size: 30px;
        display: flex;
        width: 156px;
    }

    .container__titulo {
        font-weight: 400;
    }

    .container__titulo-negrito {
        font-weight: 700;
    }

    .opcoes {
        display: flex;
    }

    .opcoes__item {
        padding: 0 1em;
        text-transform: uppercase;
    }

    .opcoes__link {
        text-decoration: none;
        color: var(--preto);
    } 

    .container__imagem__transparente {
display: none;
    }

    .cabeçalho__menu-hamburguer {
        display: none;
    }

    .opcoes__botao:checked ~ .lista-menu {
        display: block;
        width: auto;
    }

    .opcoes__botao {
        display: none;
    }

    .opcoes__botao:checked~.opcoes__rotulo>.opcoes__item {
        background: var(--azul-degrade);
        color: white;
    }

    .opcoes__item {
        padding: 2em 1em;
    }

    .lista-menu__item:hover {
        background: var(--azul-degrade);;
    }

.lista-menu__item:hover > .lista-menu__link {
    -webkit-text-fill-color: white;
    text-decoration: none;
}

    }

@media screen and (min-width: 1728px){

    .container__link {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: var(--preto);
    }

    .cabecalho {
        padding: 0 2em;
    }

    .opcoes {
        margin-right: auto;
    }

    .container__texto {
        display: block;
    }
}
2 respostas

Oi Juliana!

Poxa, que pena. Erros são sempre chatos de lidar, mas conte comigo para te auxiliar. No seu código, o que está acontecendo são questões de espaçamentos, margin, paddings, dentre outras configurações. Tive algumas dificuldades para testar seu projeto. Utilizando o HTML da aula, estou com algumas quebras no projeto. Por conta disso peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva.

Mas para não travar seu desenvolvimento gostaria de deixar um norte para resolver, o que observo é que é importante garantir que a altura do carrossel se ajuste ao conteúdo, especialmente para manter a responsividade. Em vez de definir uma altura fixa, você pode tentar usar height: auto e garantir que as imagens dentro do carrossel também sejam responsivas.

.swiper-wrapper {
    height: auto; /* Ajusta a altura automaticamente */
}

.swiper-slide img {
    width: 100%; /* Faz com que a imagem ocupe toda a largura do slide */
    height: auto; /* Mantém a proporção da imagem */
}

Sobre o menu de categorias não aparecendo no header, parece que o problema pode estar relacionado ao display: none aplicado em alguns elementos.

@media screen and (min-width: 1024px) {
   
/*RESTANTE DO CÓDIGO*/

    /* Tenta usar Block */
    .container__texto {
        display: block;
    }
}

Para testar a responsividade sem precisar de uma tela maior, você pode usar as ferramentas de desenvolvedor do navegador (DevTools). No Chrome, por exemplo, você pode abrir o DevTools (F12), clicar no ícone de dispositivo (Ctrl+Shift+M) e definir uma resolução personalizada para simular diferentes tamanhos de tela. Exemplo: A imagem mostra a interface do Google Chrome Developer Tools em modo de visualização responsiva, destacando a seção "Estilos" de um elemento HTML selecionado. O painel do lado direito mostra o código HTML da página, onde uma tag `section` com a classe "banner" está selecionada. Acima, há uma barra de ferramentas com as dimensões da tela configuradas para 1920x1080 pixels (marcado como "2" e "3"). O ícone de dispositivos, marcado como "1", está ativado para emular diferentes tamanhos de tela. O conteúdo da página inclui um banner com o texto "Já sabe por onde começar?" e uma seção de "Novos Lançamentos" logo abaixo.

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!

Oi Victor, obrigada pela rápida resposta!

As suas dicas do início não funcionaram, infelizmente. Mas aqui está o link com todos os arquivos do projeto https://drive.google.com/drive/folders/11E-fD6oLXZoey9QOyFds11e5yOe2nNhd?usp=sharing além dos erros que comentei, as setas que ficam em cima do carrossel estão desalinhadas. Conto com sua ajuda. Estava usando as devtools mas não havia conseguido, agora consegui acessar e ver que o que foi feito nos media querys não está funcionando. Os cards deveriam estar ao lado dos carroseis. Não sei se você tem acesso ao design do projeto https://www.figma.com/design/sSMbIqKaGBd66Y8roxTk2p/AluraBooks-%7C-Responsividade-com-Mobile-First?node-id=37-94&t=43G7ZIzSiNvlvs2W-1 aqui está o link do figma para caso seja necessário. Desde já, muito obrigada.