3
respostas

[Bug] Porque o @media não funcionou no meu projeto?

Na aula 4 do curso HTML e CSS: trabalhando com responsividade e publicação de projetos, aprendemos a alterar o css da página em caso de uma tela ser menor do que x-px utilizando o @media para alterar as propriedades para tornar a página responsiva. Entretanto, mesmo seguindo o passo-a-passo corretamente, o meu não ficou como o exemplificado. O meu código está no final da página. Abaixo também estão imagens do meu projeto e do projeto de portifólio no figma (como deveria estar): projeto no figmaminha versão

@media (max-widith: 1200px){
    .header{
        padding: 10%;
    }
    .header__navbar{
        justify-content: center;
    }
    .presentation{
        flex-direction: column-reverse;


}
3 respostas

Olá, Débora.

Tudo bem?

O único erro que encontrei no seu código, foi que faltou a chave de fechamento do @media, no caso só tem a chave de abertura. Só adicionar uma chave de fechamento no final do código "}", se mesmo assim não resolver. Eu recomendo compartilhar os seus códigos HTML e CSS completos aqui com a gente.

Espero ter ajudado. Qualquer dúvida manda aqui de novo. Valeu Débora.

Olá, Rennan. Agradeço pela resposta mas não era isso. Vou compartilhar o código do html e do css aqui. HTML: [code]

Home Sobre Mim
<main class="presentation">
    <section class="presentation__content">
        <h1 class="presentation__content__title">Eleve seu negócio digital a outro nível <strong class="title"> com um Front-end de qualidade!</strong></h1>
        <p class="presentation__content__text">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em<strong> React, HTML e CSS</strong>. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
        <div class="presentation__links">
            <h2 class="presentation__links__subtitle">Acesse minhas redes:</h2>
            <a class="presentation__links__nav" href="https://github.com/"> 
                    <img src="./assets/github.png"> Github</a>
            <a class="presentation__links__nav" href="https://linkedin.com/"> 
                    <img src="./assets/linkedin.png"> Linkedin</a>
            <a class="presentation__links__nav" href="https://twitch.tv/"> 
                        <img src="./assets/twitch.png"> twitch</a>
        </div>
    </section>

    <img class="presentation__image" src="./assets/Imagem.png" alt="joana santos codando">
</main>

<footer class="footer">
    <p>Desenvolvido por Alura.</p>
</footer>
[/code]

CSS: [code]

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap'); *{ margin: 0; padding: 0; } :root{ --primery-color: #000000; --secondery-color: #F6F6F6; --terciary-color: #22D4FD; --primery-font: 'Krona One', sans-serif; --secondary-font: 'Montsserat', sans-serif; --hover-color: #272727; } body{ box-sizing: border-box; background-color: var(--primery-color); color: var(--secondery-color); } .header{ padding: 2% 0% 0% 15% ; } .header__menu{ display: flex; gap: 80px; } .header__menu__links{ font-family: var(--secondary-font); font-size: 1.5rem; font-weight: 600; color: var(--terciary-color); text-decoration: none; } .presentation { padding: 5% 15%; display: flex; align-items: center; justify-content: space-between; gap: 82px; } .presentation__content{ width: 50%; display: flex; flex-direction: column; gap: 40px; } .presentation__content__title{ font-size: 2.25rem; font-family: var(--primery-font); } .title{ color: var(--terciary-color); } .presentation__content__text{ font-size: 1.5rem; font-family: var(--secondary-font); } .presentation__links{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 32px; } .presentation__links__subtitle{ font-family: var(--primery-font); font-weight: 400; font-size: 1.5rem; } .presentation__links__nav{ display: flex; justify-content: center; gap: 16px; border: 2px solid var(--terciary-color); width: 378px; text-align: center; border-radius: 8px; font-size: 1.5rem; font-weight: 600; padding: 21.5px 0; text-decoration: none; color: var(--secondery-color); font-family: var(--secondary-font);

} .presentation__links__nav:hover{ background-color: var(--hover-color); } .presentation__image{ width: 50%; } .footer{ padding: 23.74px ; color: var(--primery-color); background-color: var(--terciary-color); text-align: center; font-family: var(--secondary-font); font-size: 1.5rem; font-weight: 400; } @media (max-widith: 1200px){ .header{ padding: 10%; } .header__menu{ justify-content: center; } .presentation{ flex-direction: column-reverse; } } [/code]