1
resposta

[Dúvida] Mesmo aplicando o @media, não esta funcionando a responsividade :/

:root { --cor-primaria: #000000; --cor-secundaria: #F6F1F1; --cor-terciaria: #fc9d9d; --cor-hover: #fff8de2f;

--fonte-primaria: 'Krona One', sans-serif;
--fonte-secundaria: 'Mont Serrat', sans-serif;

}

  • { margin: 0; padding: 0; }

body { color: var(--cor-secundaria); box-sizing: border-box; background-color: var(--cor-primaria);

}

.cabecalho{ padding: 2% 0% 0% 15%; }

.cabecalho__menu{ display:flex ; gap: 80px; }

.cabecalho__menu__link{ font-family: var(--fonte-secundaria); font-size: 1.5rem; font-weight: 600; color: var(--cor-terciaria); text-decoration: none;

}

.titulo-destaque { color:var(--cor-terciaria);

}

.apresentacao { padding: 5% 15%; display: flex; align-items: center; justify-content: space-between; gap:40px; }

.apresentacao__conteudo { width: 50%; display: flex; flex-direction: column; gap: 20px; }

.apresentacao__conteudo__titulo { font-size: 2.25rem; font-family: var(--fonte-primaria); }

.apresentacao__conteudo__texto { font-size: 1.37rem; font-family: var(--fonte-secundaria);

}

.apresentacao__link__curriculo{

text-decoration: none;
color: var(--cor-terciaria);

}

.apresentacao__links{ display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 32px; }

.apresentacao__links__subtitulo{ font-family: var(--fonte-secundaria); font-weight: 400; font-size: 1.5rem; color: var(--cor-terciaria) }

.apresentacao__links__link{ display: flex; justify-content: center; gap: 16px; border: 2px solid var(--cor-terciaria); width: 50%; text-align: center; border-radius: 8px; font-size: 1.5rem; font-weight: 600; padding: 21.5px 0; text-decoration: none; color: var(--cor-secundaria); font-family: var(--fonte-secundaria); }

.apresentacao__links__link:hover{ background-color: var(--cor-hover); }

.rodape{ color: var(--cor-primaria); background-color: var(--cor-terciaria); padding: 24px; text-align: center; font-family: var(--fonte-secundaria); font-size: 1.5rem; font-weight: 400;

}

.cor__curriculo{

padding: 15px;
color: var(--cor-terciaria);
font-size: 1.12rem;

}

@media (max-width 1200px) {

.cabecalho{
    padding: 10%;
}

.cabecalho__menu{
    justify-content: center;
}

 .apresentacao {
  flex-direction: column-reverse;
 }


}
1 resposta

Oi, Lucas

🚀 Veja como turbinar seus estudos utilizando o fórum da Alura