3
respostas

Largura do body no mobile

Olá pessoal, o resultado do meu site no mobile ficou diferente porque os elementos no body estão ocupando menos de 50% da tela, mas em largura do desktop fica normal. tentei alterar a largura do body para 100% mas não resolveu, segue o link do github com as páginas: https://github.com/lucasffialho/cursoFlexbox

3 respostas

Oi, Luas, tudo bem?

Na seu arquivo flexbox.css não tinha as medias queries necessárias para que o site na versão mobile ficasse com uma comportamento mais adequado. Adaptei a media queria do curso com algumas alterações, pois tinha um pequeno bug na largura da caixa onde estão as logos do patrocinadores.

@media(max-width: 768px) {
    .cabecalhoPrincipal-nav {
        flex-direction: column;
    }

    .cabecalhoPrincipal .container {
        flex-direction: column;
        align-items: initial;
        text-align: center;
    }

    .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-patrocinadores-list {
        justify-content: flex-start;
        margin: 0;
        width: 100%;
    }
    .rodapePrincipal-patrocinadores-list-link{
        margin-left: 0.7rem;
    }

    .rodapePrincipal-contatoForm {
        width: 100%;
    }

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

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

    .videoSobre .container {
        flex-direction: column;
    }

    .videoSobre-video {
        margin: 0 auto;
    }
}

Adiconando ao seu arquivo flexbox.css o seu site, na versão mobile, o body vai ficar centralizado.

Testa e me fala se deu certo!

Opa, obrigado pela ajuda, Lais. NA verdade quando passei para a secao seguinte do curso parece que mudou alguma coisa no footer e corrigiu o problema, mas agradeco a ajuda!

Oi, Lucas, que bom que conseguiu resolver :}

Bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software