1
resposta

erro no codigo @media.

fiz as primeira alterações no código e funcionou, porem quando faço para as outras medida de tela o mesmo não funciona, alguém poderia me ajudar já reescrevi o código 6 vezes. obs: os background são para certificar se as @media estão funcionando.

@media screen and (min-width:0){/* midia para celulares*/
    .destaques__principal{
        grid-column: 1 /5;

    }
    .destaques__secundario:nth-child(2){
        display: none;
        grid-column: none;
        grid-row: none;
    }
    .destaques__secundario:nth-child(3){
        display: none;
        grid-column: none;
        grid-row: none;
    }
    .destaques__secundario:nth-child(4){
        display: none;
        grid-column: none;
        grid-row: none;
    }
    .destaques__secundario:nth-child(5){
        display: none;
        grid-column: none;
        grid-row: none;
    }
    .destaques__categorias{
        grid-column: 1 / 5;
    }
    .populares__conteudo{
        flex-direction: column;

    }   
   .populares__card{
    background-color: rgb(71, 105, 255);
    grid-template-rows: 150px auto;
    margin-bottom: 3rem;
    margin-right: 0;
    width: 100%;

    }
    }
/******************************************************************************************************/
@media screen and (min-width:760px){/* midia para tablet*/
    .destaques__principal{
        grid-column: 1 /4;

    }
    .destaques__secundario:nth-child(2){
        display: flex;
        grid-column: 4/4;
        grid-row: 1/1;
    }
    .destaques__secundario:nth-child(3){
        display: flex;
        grid-column: 4/4;
        grid-row: 2/2;
    }
    .destaques__secundario:nth-child(4){
        display: flex;
        grid-column: 4/4;
        grid-row: 3/3;
    }
    .destaques__secundario:nth-child(5){
        display: flex;
        grid-column: 3/3;
        grid-row: 3/3;
    }
    .destaques__categorias{
        grid-column: 1 / 3;
    }  
    .populares__conteudo{
        flex-direction: row;

    } 

    .populares__card{
        background-color: rgba(138, 255, 71, 0.808);
       grid-template-rows: 150px auto;
       margin-bottom: 3rem;
       margin-right: 1rem;
       width: calc(50%-1rem);
    }
}

@media screen and (min-width:992px){/* midia para desktop*/
    .populares__card{
        background-color: rgba(255, 252, 71, 0.808);

    }
}

@media screen and (min-width:1200px){/*para novos itdd */
    .populares__card{
        background-color: rgb(255, 71, 102);

    }
}
1 resposta

Oi, Levi, tudo bem?

Nesse trecho:

.populares__conteudo{
        flex-direction: column;

Troque o flex-direction, por flex-direction: row; que as imagens irão voltar pro lugares devidos.

Espero ter te ajudado!