Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Problema com o menu lateral

Referente ao curso CSS: dispondo elementos com Flexbox e Grid, no capítulo Responsividade com grid e atividade Estilizando o cartão de recentes

por Emanuele Pires
| 242k xp | 3 posts
Implantação de Software

Meu projeto está assim:

Tela preta

Abaixo dessa tela preta, aparece a parte "Início" e os cartões normalmente. O problema é só no media query, o meu está assim (fiz algumas mudanças na nomenclatura):

@media screen and (min-width: 1440px) {
    .menu__lateral {
        position: static;
        width: 200px;
        grid-column: 1;
        grid-row: 1 / span 2;
    }
}

@media screen and (min-width: 1440px) {
    .principal {
        display: grid;
        grid-template-columns: auto 1fr auto;
        column-gap: 2rem;
        padding: 1rem 3.75rem;
    }
}

@media screen and (min-width: 1440px) {
    .cartao__recentes {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        row-gap: 1.5rem;
        width: 256px;
        padding: 1rem;
        box-sizing: border-box;
    }

    .cartao--recentes .cartao__titulo {
        grid-column: auto;
    }

}
1 resposta
solução!
por Gabriela França
| 47.7k xp | 22 posts
Alura Scuba Team Scuba Front-end

Oiii, Emanuelle! Como você está?

Peço desculpas pela demora em obter um retorno.

No projeto o menu lateral ocupa a primeira coluna, inicia na linha 1 e abrange duas linhas. O cabeçalho e o conteúdo principal ocupam a segunda coluna. O cabeçalho na primeira linha da segunda coluna e o conteúdo principal abaixo do cabeçalho e ao lado do menu lateral.

Por isso, usamos o grid-column: 2; no Media Query das classes .cabecalho e .principal

E para organizar o layout é necessário usar no Media Query da classe .menu__lateral o grid-column: 1; para o menu ocupar a primeira coluna e o grid-row: 1 / span 2; para ocupar iniciar na linha 1 e abranger duas linhas

Classe .cabecalho:

@media screen and (min-width: 1440px) {
    .cabecalho {
        background-color: #1D232A;
        display: grid;
        column-gap: 32px;
        grid-template-columns: 1fr auto;
        padding: 16px 60px;
        height: 80px;
        box-sizing: border-box;
        grid-column: 2;
    }

Classe .principal:

@media screen and (min-width: 1440px) {
    .principal {
        display: grid;
        grid-template-columns: auto 1fr auto;
        column-gap: 32px;
        padding: 16px 60px;
        grid-column: 2;
    }
}

Classe .menu__lateral:

@media screen and (min-width: 1440px) {
    .menu__lateral {
        position: static;
        width: 200px;
        grid-column: 1;
        grid-row: 1 / span 2;
    }
}

Em caso de mais dúvidas, me coloco à disposição.

Grande abraço e bons estudos!

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