Solucionado (ver solução)
Solucionado
(ver solução)
12
respostas

Contato e logos do rodapé alinhamento

Olá, na parte mobile o rodapé que tem os logos e o formulário, estão na mesma linha, o que pode ser?

@media(max-width: 768px) {
    .cabecalhoPrincipal .container {
        flex-direction: column;
        align-items: initial;
        text-align: center;
    }
    .cabecalhoPrincipal-nav{
        flex-direction: column;
    }

    .cabecalhoPrincipal-nav-link-app {
        order: -1;
    }

    .conteudoPrincipal-cursos {
        flex-direction: column;
    }
    .conteudoPrincipal-cursos-link {
        width: 100%;
    }
    .rodapePrincipal-navMap-list {
        height: auto;
    }
    .rodapePrincipal-patrocinadores-container {
        flex-direction: column;
        align-items: center;
    }

    .rodapePrincipal-contatoForm{
        width: 100%;
    }

    .rodapePrincipal-patrocinadores-list {
        margin: 0;
        width: 100%;
    }


    .rodapePrincipal-contatoForm-fieldset {
        justify-content: center
    }    

    videoSobre .container {
        flex-direction: column;
    }
    .videoSobre-video {
        margin: 0 auto;
    }
}
12 respostas

Oi Gisele, não era pra ser assim? Eram pra estar um abaixo do outro? Caso seja sim, acredito que vá conseguir fazer isso trocando o flex-direction para row em vez de column.

Oi, não entendi e acho que você não entendeu minha pergunta. É que eu já revi várias vezes a aula e não consegui entender porque não tá tudo alinhado em uma coluna no mobile.

Inclusive eu peguei a última versão do arquivo flexbox pronto e se você tentar diminuir a janela o form fica fora do layout ao invés de quebrar para outra linha.

Opa, agora sim acho que entendi sua pergunta. Me disponibiliza seu projeto pra mim dar uma olhada mais de perto no que pode ser?

A plataforma sugeriu gist, quando eu tentei colar todo o código, então eu criei um html, mas parece que não tem opção de criar o css separado.

Link do código, tem todos os css do arquivo e o último é o que eu criei seguindo o passo a passo das aulas:

Página flexbox

Oi Gisele, eu abri o gist que você me mandou e acontece que os logos do rodapé estão todos um abaixo do outro. E não um do lado do outro. Você disse que eles estavam na mesma linha, não foi? Você alterou alguma coisa no código antes de me enviar?

Olá, então eu estava testando e quando eu importo os arquivos css separados (reset, style e flexbox.css) com a tag link dentro do head acontece esse problema. E quando eu baixei o arquivo do gist, nas telas maiores de 1024, estava tudo como mobile. O zip do site também, quando eu baixei e abri no chrome.

Hmm, me parece que estamos passando por um problema de media query. Em telas maiores que 1024, a visão devia ser de desktop, mas você testou e está sendo uma visão mobile, né isso?

Vou baixar o zip do projeto pra testar também.

solução!

Gisele, baixei o projeto original e ele não tem esse problema, olha aqui: https://github.com/alura-cursos/posicione-elementos-com-flexbox

Oi, desculpa acabei parando o curso, voltei. Não foi desse link que eu baixei, esse está certo.

Foi da aula 04, tópico 06 De desktop para mobile, a estrutura dos arquivos estava diferente, não tinha esse mais flex:

https://cursos.alura.com.br/course/posicione-elementos-com-flexbox/task/22257

Oi Gisele, desculpa, eu não entendi o que você quis dizer. Nos arquivos dessa aula, o que não tinha exatamente? Eu baixei, abri, olhei o código e não consegui ver o problema. :/

Quer tentar me explicar de novo? Você poderia olhar de novo pra ver se o problema talvez já tenha sido corrigido por outra pessoa?

Oi, tudo bem, o último link que você passou do github estava sem o problema. O problema era o alinhamento que não quebrava para outra linha.

Entendi, então está tudo resolvido, certo?