2
respostas

Responsividade

Olá, primeiramente obrigado pelo excelente curso! Tudo estava indo conforme os vídeos do professor, porém na aula sobre responsividade as imagens das receitas acabaram ficando juntas... Já revisei o código deixado pelo professor e comparei com o meu, mas não consegui encontrar o erro.

//css das receitas
.receitas{
    background: #e5e5e5;
    display: flex;
    flex-wrap: wrap; 
}

@media screen and (min-width: 0px){
    .receitas {
        padding: 5rem 0 0 1rem;
    }
}

@media screen and (min-width: 768px){
    .receitas {
        padding: 5rem 0 0 2.5rem;
    }
}

@media screen and (min-width: 992px){
    .receitas {
        padding: 5rem 0 0 5rem;
    }
}
//css receita
.receita{
    background: #fdfdfd;
    display: flex;
    flex-direction: column;
    margin-bottom: 5rem;
}

@media screen and (min-widht: 0px) {
    .receita {
        margin-right: 1rem;
        width: 100%;
    }
}

@media screen and (min-widht: 768px) {
    .receita{
        margin-right: 2.5rem;
        width: calc(33% - 2.5rem);
    }
}

@media screen and (min-widht: 992px) {
    .receita{
        margin-right: 5rem;
        width: calc(25% - 5rem);
    }
}
2 respostas

Da uma olhada se o @media do professor esta mesmo assim

@media screen and (min-widht: 0px) {
    .receita {
        margin-right: 1rem;
        width: 100%;
    }
}

acho que no lugar desse 0px deveria ter um outro valor.

Não seria a nomeclatura do width que está incorreta?

@media screen and (min-"widht" <- Aqui deveria estar escrito min-width: 0px) {
    .receita {
        margin-right: 1rem;
        width: 100%;
    }
}