3
respostas

Necessário modificar o style.css para aparecer o problema do flex mostrado na aula

No arquivo style.css tem que apagar a parte abaixo para que o projeto apresente o mesmo problema da aula, qual seja, a dificuldade de posicionar os cursos lado a lado, 4 por linha, separados por um espaçamento entre eles para não ficarem colados.

Percebemos que ao terminar de colocar a propriedade flex-wrap no .conteudoPrincipal-cursos, os cursos já ficam todos posicionados corretamente conforme o layout final do projeto, o que não deveria acontecer, pois na aula eles continuam grudados um no outro e posicionados errado.

Isso acontece por causa do código abaixo que está no final do arquivo style.css. Para resolver, é só comentar essa parte, que ele vai retirar a formatação e será possível acompanhar a aula com o projeto igual ao do professor.

/* @media(min-width: 769px) {

    .container {
        width: 85%;    
    }

    .subtitulo {
        text-align: left;
    }

    .cabecalhoPrincipal-nav-link {
        border-radius: 5px;
        border: 1px solid #9799A6;
    }

    .cabecalhoPrincipal-nav-link:hover {
        color: #FFF;
        background-color: #9799A6;
    }

    .cabecalhoPrincipal-titulo {
        margin: 0;
    }

    .cabecalhoPrincipal-nav {
        width: auto;
    }

    .cabecalhoPrincipal-nav-link {
        width: auto;
        margin: 0 0 0 10px;
    }

    .rodapePrincipal-contatoForm {
        margin-top: 0;
        text-align: left;
    }

    .conteudoPrincipal-cursos-link:nth-child(3n) {
        margin-right: 0;
    }

    .conteudoPrincipal-cursos-link:nth-child(3n+1) {
        margin-left: 0;
    }

}

@media(min-width: 1000px) {
    .conteudoPrincipal-cursos-link {
        margin: 1.333%;
    }

    .conteudoPrincipal-cursos-link:nth-child(3n) {
        margin-right: 1.33%;
    }

    .conteudoPrincipal-cursos-link:nth-child(3n+1) {
        margin-left: 1.333%;
    }

    .conteudoPrincipal-cursos-link:nth-child(4n) {
        margin-right: 0;
    }

    .conteudoPrincipal-cursos-link:nth-child(4n+1) {
        margin-left: 0;
    }

    .videoSobre-sobre {
        margin-left: 1.5em;
    }

}

 */

Comente também a propriedade margin em:

.conteudoPrincipal-cursos-link {
    height: 100px;
    background-color: #FFF;
    text-align: center;
    /* margin: 1%; */
    transition: .3s;
    box-shadow: 2px 2px 2px #CCC;
    position: relative;
}
3 respostas

Olá Bruno!

Obrigado pelo tópico. Segui o procedimento e ficou conforme o vídeo.

Sabe dizer se é necessário mudar algo no arquivo "flexbox.css"? Acontece o mesmo problema quando ativo o responsivel.

Obrigado!!!

Alurinha_Responsivel

Olá Emerson. No flexbox não precisa mudar nada até esse ponto da aula. Qquanto à parte da responsividade eu não posso te responder, pois não assisti ainda.

Tive o mesmo problema, achei estranho, valeu por compartilhar! o/