Entrar Ainda não tem acesso?
1
resposta

[Bug] flex-wrap nap funciona corretamente

Referente ao curso CSS: Flexbox e layouts responsivos, no capítulo Rodapé responsivo e atividade Quebra de coluna e linha: flex-wrap

por Fabio Gustavo Marques Fernandes
| 29.1k xp | 15 posts

Olá, pessoal!

Estou utilizando o Flex-wrap, no entanto o codigo funciona perfeitamente para mobile e desktop, sendo que para tablet ele está tendo o mesmo comportamento que para mobile, como posso proceder a esse comportamento, sendo que estou utilizando as mesmas propriedades do Luan.

style.css

.rodape__container {
    width: 100%;
    height: 875px;
    color: var(--cinza-texto);
    line-height: 1.5;
    font-size: 16px;
    background-color: white;
}

.rodape__titulo {
    color: var(--azul-medio);
    font-weight: bold;
    padding: 10px 0 20px 0;
}

@media (min-width: 1440px) {
    .rodape__container {
        padding-left: 240px;
        height: 225px;
    }
}

flexbox.css

.rodape__container {
    display: flex;
    /*flex-direction: column;
    flex-wrap: wrap;*/
    flex-flow: column wrap;
}


@media (min-width:834px){

    .cabecalho__pesquisar {
        display: block;
    }

    .rodape__container {
        justify-content: space-between;
    }
}

Gostava de utilizar as mesmas propriedades e não ter que colocar uma nova :(

1 resposta
por Renan Lima
| 3485.6k xp | 7361 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Fabio.

Tudo bem?

Analisando o seu código percebi que está idêntico ao da aula, não há erros. Eu até testei ele com o HTML da aula, e está funcionando. Uma dica é você testar igual como o professor fez na aula, utilizando o modo responsivo do DevTools do navegador e ir abrindo a janela de vagar percebendo a mudança conforme vai atingindo os tamanhos de tela.

  • Celular: No caso do celular, o rodapé tem que ter duas colunas, até atingir o tamanho de tela 834px ou seja, telas de 834px ou menores:
    @media (min-width: 834px)

  • Tablet: Já no tablet, o rodapé vai ter 4 colunas enquanto a tela tenha um tamanho entre 835px que é um a mais que o limite do celular, e no máximo 1440px, passou disso já é desktop.

  • Desktop: E no desktop(PC) o rodapé vai ter 7 colunas, ai o rodapé já está abertão, isso em telas 1440px ou maiores:

    @media(min-width: 1440px)

O que você pode fazer é tentar alterar esses valores, tentar diminuir o de celular para 700px em vez de 834px, para testar.

Qualquer coisa compartilha os códigos completos dos arquivos HTML e dos CSS, assim conseguimos testar.

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.