Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvidas sobre o número de colunas no modo desktop

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

por Lucas Lira de Oliveira
| 48.3k xp | 4 posts

Fui acompanhando a aula direitinho mas ao deixar na tela máxima do meu notebooke ele ainda fica com 4 colunas:

rodape com 4 colunas

Mas quando ponho o site no monitor do meu quarto ele põe em 7 colunas:

footer com 7 colunas

Eu sei que ao por em um monitor maior ele destribuiria melhor, mas eu tinha a impressão de que caberia tranquilo as 7 colunas na tela do meu notebook.

Tem como eu reajustar para que caiba tudo no tamanho da tela do meu notebook? Porque ele definitivamente não tem uma largura de tela de um tablet kkk

segue meu flexbox.css:

/* PARTE DO CABECALHO: */
.cabecalho__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
}

.cabecalho__pesquisar__item {
    display: none;
}



/* PARTE DO RODAPE: */
.rodape__container {
    display: flex;
    flex-flow: column wrap;
}





/* MEDIA QUERRY DE ADAPTACAO DE TELA: */
@media (min-width: 834px) {
    /* PARTE DO CABECALHO: */
    .cabecalho__pesquisar__item {
        display: block;
    }


    /* PARTE DO RODAPE: */
    .rodape__container {
        justify-content: space-between;
    }
}
2 respostas
solução!
por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Lucas, tudo bem?

Podemos alterar a disposição dos elementos na página para que todas as seções do rodapé fiquem em apenas uma linha. Para isso, temos que alterar no arquivo "flexbox.css" as propriedades da classe rodape__container da seguinte forma:

.rodape__container {
    display: flex;
    justify-content: space-around;
    row-gap: 3em;
    flex-wrap:wrap;
}

Mantemos o display flex, adicionamos a propriedade justify-content: space-around; responsável por fazer com que o espaço seja distribuído uniformemente ao redor dos itens, adicionamos um gap: 3em; para definir as lacunas entre as linhas e colunas de cada container no rodapé, e, por fim utilizamos a propriedade flex-wrap: wrap para permitir que os itens se movam para a próxima linha quando não houver espaço suficiente na linha atual.

Também é necessário alterar no arquivo "estilos.css", a propriedade heightda classe rodape__container para o valor auto. Dessa forma, a distância entre a primeira e segunda linha quando houver quebra de linha no rodapé será automática e não definida por um número específico.

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Lucas Lira de Oliveira
| 48.3k xp | 4 posts

Quando apliquei todas as alterações, os itens ficaram todos na mesma linha, mas o último section (o do "Mobile") ficou colado na tela. Daí voltei o height para o que era antes e adicionei um padding-right no último termo:

.rodape__container:last-child {
    padding-right: 2em;
}

Com isso, consegui por um espaço a direita:

rodape com o espaçamento a direita