4
respostas

Aula 3 - Grid Principal (Não funciona no Firefox e código a mais)

Boa noite, não estava conseguindo realizar esta tarefa, então identifiquei com a ajuda do inspecionar o seguinte código já na página. Já contendo algumas definições para as classes que estavamos trabalhando. Então retirei as classes que definiam margem para o conteudoPrincipal-cursos-link e no Chrome ficou idêntico ao do professor, porém no Firefox não funciona, fica sem margem-bottom, os elementos ficam grudados. Sendo que se deixar o código abaixo, somente fazendo o que nosso amigo postou em outro tópico Aqui funciona, mas também somente para chrome.

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

}
4 respostas

Acabei de ver na internet que as margins definidas dentro de um flexbox, não funcionam com porcentagem no firefox, fiz com uma largura definida em pixels e deu o espaçamento, alguém sabe me dizer uma forma de contornar isso?

A ordem dos medias está ao contrário, o ideal seria do maior pro menor, no seu caso, e sempre no final de todo o CSS. Em ultimo caso verifica se o HTML está no formato do HTML5 (pode dar erro se você coloca algum texto antes do

) e também pode verificar se seu firefox está atualizado.

Boa noite. Sim html 5 e Firefox atualizado. Só não entendi a parte das medidas estar ao contrário.

Entendi você fala as @media , na verdade esse código que colei aqui é o do professor. Única alteração que fiz foi retirar a classe mencionada acima. Meu problema é que no Firefox mais novo não funcionam as margens dentro do flexbox. Porém colocando uma medida fixa ela funciona.

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