Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

PROBLEMA NA GRID COM RESOLUÇÃO ACIMA DE 768PX (RESOLVIDO)

Muitos tem tido o problema de a grid mesclar quando chega a resolução de 768px pra cima.

https://imgur.com/ETivjid (link do problema)

Segue abaixo minha resolução:

Vá no arquivo style.css e encontre o seguinte código:

@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 {
        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;
    }
}

Remova as duas ultimas instruções:

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

No final teremos isso:

@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 {
        margin: 0 0 0 10px;
    }

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

O problema ocorre porque as duas ultimas estilizações serviam para quando o flex não posicionava as grids corretamente lá no inicio do curso, tendo que fazer manualmente a margin para os itens.

Espero ter ajudado.

1 resposta
solução!

Resolvido