2
respostas

[Bug] Problema na responsividade no exercício da página Picos

Assim que adiciono uma lista no meu html, os itens do meu código abaixo somem do site, parece que os outros elementos estão ficando dentro da caixa da lista. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Até agora meu código está assim


/* Picos   */


@media screen and (min-width: 1440px){
    .principal-picos{
        grid-template-areas:
        "titulo-pagina titulo-pagina titulo-pagina" 
        "picos-mapa picos-mapa picos-favoritos"
        "secao-picos-mais-visitados secao-picos-mais-visitados secao-picos-mais-visitados"

    }
}

.picos-mapa{
    width: 100%;
    height: 468px;
    background-image: url(../img/mapa-picos.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px
}

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


    .picos-mapa{
        grid-area: picos-mapa;
    }
    .secao-picos-mais-visitados{
        grid-area: secao-picos-mais-visitados;
    }

    .picos-favoritos{
        grid-area: picos-favoritos;
    }
}

Vou deixar o link do meu repositório para uma visão completa do código.

https://github.com/RAGE4B/HZC

Já revisei o meu código e não estou achando o problema, qualquer ajuda é bem vinda.

2 respostas

O bug já foi resolvido, não encontrei o bug mas refiz toda a página e deu bom.

Oi Gabriel, tudo bem?

Ás vezes essas coisas que não conseguimos explicar o motivo acontecem mesmo kkkk. A melhor solução é fechar tudo, reiniciar e reescrever o código mesmo.

Que bom que conseguiu resolver o problema, irei finalizar o tópico para você.

Um abraço e bons estudos.