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

Dúvida sobre o media queries

Olá, tudo bem? Vou colocar o texto que está no topico "para saber mais" do curso:

"Podemos definir uma largura máxima de “480px” para o celular: @media (max-width: 480px), e em outra media query definir uma largura máxima de “800px” para os tablets: @media (max-width: 800px), e então atribuímos os ajustes necessários dentro de cada media query, dessa forma teremos nosso site 100% responsivo."

Eu defini no meu projeto dessa forma, mas não funcionou, irei mostrar o código:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Dessa forma, apenas a estilização do 1400px funciona, como eu poderia fazer funcionar os dois?

Grato!

1 resposta
solução!

Olá, Rian! Como vai?

De acordo com o que entendi da imagem que você forneceu. Vou deixar aqui uma possível solução para essa situação.

Caso você queira aplicar uma estilização específica para um tamanho de tela específico (que inicia em uma certa medida e termina em uma certa medida), você pode utilizar a seguinte estrutura:

seletor {
    estilo para telas fora das medidas do '@media'(maiores de 1400px, nesse caso).
}

@media (max-width: 1250px) {
    seletor {
        estilo para telas até 1250px;
    }
}

@media (min-width: 1250px) and (max-width: 1400px) {
    seletor {
        estilo para telas entre 1250px até 1400px.
    }
}

No seu caso, o código seria o seguinte:

/* Estilo para telas até 1250px */
@media (max-width: 1250px) {
    .cabecalho {
        padding: 6%;
    }

    .cabecalho__nav{
        justify-content: center;
    }
    
    .apresentacao {
        flex-direction: column-reverse;
    }
}

/* Estilo para telas entre 1250px e 1400px */
@media (min-width: 1250px) and (max-width: 1400px) {
    .cabecalho {
        padding: 100%;
    }
}

Espero que isso ajude! Fico à disposição. Abraço!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!