Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

[Dúvida] A tela não ficou responsiva e a imagem não acompanha

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos, no capítulo Responsividade e atividade Media Queries

por Ana
| 15.6k xp | 24 posts

A imagem continua parada do lado direito, não importa o que eu escreva em @media.

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root {
    --cor-primaria: #2C3639;
    --cor-secundaria: #DCD7C9;
    --cor-terciaria: #A27B5C;
    --cor-hover: #3F4E4F;

    --fonte-primaria:'Krona One', sans-serif;
    --fonte-secundária: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

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

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

.cabecalho__menu {
    display: flex;
    gap: 5rem;
}

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

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

.apresentacao__conteudo {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin: 1.25rem;
    color: var(--cor-secundaria);
}

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

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

.apresentacao__conteundo__texto {
    font-size: 1.5rem;
    font-family: var(--fonte-secundária);
}

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

.apresentacao__links__subtitulo {
    font-family: var(--fonte-primaria);
}

.apresentacao__links__link {
    display: flex;
    justify-content: center;
    gap: 1rem;
    border: 0.125rem solid var(--cor-terciaria);
    width: 50%;
    text-align: center;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 1.24rem 0;
    text-decoration: none;
    color: var(--cor-secundaria);
    font-family: var(--fonte-secundária);
    
}

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

.apresentacao__imagem {
    width: 50%;
}

.rodape {
    color: var(--cor-secundaria);
    background-color: var(--cor-terciaria);
    padding: 1.5rem;
    text-align: center;
    font-family: var(--fonte-secundárias);
    font-size: 1.5rem;
    font-weight: 400;
}

.apresentacao__conteudo__texto a{
    text-decoration: none;
    color: var(--cor-terciaria);
}

@media (max-width:1200px) {
    .apresentacao {
        flex-direction: column-reverse;
    }
}
6 respostas
por Nícolas Felipe Ferreira Souza
| 3278.4k xp | 10738 posts
Instrutor

Olá, Ana! Como vai?

Sinto muito pelo seu problema.

Para resolvê-lo, existem algumas possibilidades:

  • 1. Adicionar margin ou padding a imagem;
  • 2. Adicionar padding ao elemento pai da imagem (nesse caso, .principal);
  • 3. Adicionar justify-content: center; ao elemento pai da imagem (nesse caso, .principal);
  • 4. Adicionar text-align: center; ao elemento pai da imagem (nesse caso, .principal);

Alguma dessas opções acima deve te ajudar com o seu problema. Espero ter ajudado.

Caso ainda precise de ajuda, pode mandar aqui sem problemas, estamos aqui para ajudar.

Abraço!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Ana
| 15.6k xp | 24 posts

Olá! Boa tarde, Eu copiei o código da aula anterior e estou refazendo a aula, agora a única coisa que está fora do lugar é a imagem em currículo. Está fora, mais baixa. Nas páginas home e sobre mim está direito, mas em currrículo ficou desajustada. Poderia me ajudar?

por Nícolas Felipe Ferreira Souza
| 3278.4k xp | 10738 posts
Instrutor

Olá, Ana! Tudo bem?

Claro! Poderia compartilhar os códigos dessa página também? Assim eu posso testá-la e ver qual a melhor forma de prosseguirmos para resolver o problema.

Fico no aguardo.

Até mais!

por Ana
| 15.6k xp | 24 posts

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
            <a class="cabecalho__menu__link" href="curricullum.html">Currículo</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Currículo</h1>
            <p class="apresentacao__conteudo__texto">
                Desafios sempre me instigaram e fizeram parte de minha vida. Certamente por isso  o design faz parte da minha formação acadêmica, profissional e da minha vida e agora Analíse e Desenvolvimento de Sistemas.
                Criar é a arte de dar forma a projetos e sonhos. Seja no design, seja programando.
            </p>
            <h2 class="apresentacao__conteudo__titulo">Experiências</h2>
            <p class="apresentacao__conteudo__texto">
            <ul class="apresentacao__conteudo__texto">
                <li> Design de Multimídias na Cotrijal (2019 - 2021) - Planejar, organizar e produzir material de áudio  e vídeo para veiculação no site da EAD da Cotrijal, editando imagens e vinhetas eletrônicas, trilhas sonoras e textos, além de criar e roteirizar peças multimídia.  </li><br><br><br>

                <li> Professora de Inglês no Wizard (2017 - 2018) - Aula para alunos de inglês a intermediário, de 4 anos até a idade adulta. Produção de conteúdo para aulas e atividades e traduções do inglês para o português. </li>
            </ul>
            </p> 
            <h2 class="apresentacao__conteudo__titulo">Estudos</h2>
            <div class="apresentacao__conteudo__texto">
            <ul class="apresentacao__conteudo__texto">
                <li>Aprenda HTML, CSS e boas práticas de desenvolvimento - Alura Cursos <a href="linkdocertificado">com certificado</a> </li>
                <li>Organize sua página e deixe-a responsiva para diferentes telas - Alura Cursos <a href="linkdocertificado">com certificado</a></li>
                <li>Aprimore os seus conhecimentos e desenvolva layouts modernos para web - Alura Cursos <a href="linkdocertificado">com certificado</a></li>
            </ul>
            </div>    
        </section>
        <img class="apresentacao__imagem" src="./assets/pexels-andrew-neel-3178818.jpg" alt="Desenho de uma mulher programando em uma mesa de costas">
    </main> 
    <footer class="rodape">
        <p> Desenvolvido por Adriana de Souza</p>
   </footer>
</body>
</html>
por Ana
| 15.6k xp | 24 posts

CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root {
    --cor-primaria: #2C3639;
    --cor-secundaria: #DCD7C9;
    --cor-terciaria: #A27B5C;
    --cor-hover: #3F4E4F;

    --fonte-primaria:'Krona One', sans-serif;
    --fonte-secundária: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

body{
    box-sizing: border-box;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}
.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;
}
.apresentacao{
    padding: 5% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 82px;
}
.apresentacao__conteudo{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo{
    font-size: 2.25rem;
    font-family: var(--fonte-primaria);
}
.titulo-destaque{
    color: var(--cor-terciaria);
}
.apresentacao__conteudo__texto{
    font-size: 1.5rem;
    font-family: var(--fonte-secundaria);
}

.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}
.apresentacao__links__subtitulo{
    font-family: var(--fonte-primaria);
    font-weight: 400;
    font-size: 1.5rem;
}
.apresentacao__links__navegacao{
    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);
}
.apresentacao__imagem{
    width: 50%;
    padding: 2%;
}
.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;
}

@media (max-width:1200px){
   .cabecalho{
    padding: 10%;
   }
   
   .cabecalho__menu{
    justify-content: center;
   }

    .apresentacao{
        flex-direction: column-reverse;
        padding: 5%;
    }

    .apresentacao__conteudo{
        width: auto;
    }

}
solução!
por Ana
| 15.6k xp | 24 posts

Solução: classe apresentação justify-content: flext-start e em @media classe apresentação align-otems: center.