3
respostas

[Dúvida] Imagem desconfigura a pagina no Mobile

Para a versão mobile, a imagem desconfigura totalmente a responsividade do portifólio, sem ela ele funciona como deveria. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

CÓDIGO HTML

<!DOCTYPE html>
<html lang="pt-br">
    <body>
        <header>
            <a Class="cabecalho_curriculo" href="index.html">Home</a>
         </header>
            </body>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Currículo</title>
    <link rel="stylesheet" href="style.css">
</head>
<main class="apresentacao_curriculo">
    <section class="apresentacao__conteudo">
        <h1 class="apresentacao__conteudo__titulo">Currículo</h1>
        <p class="me">
            Olá, sou a Aline, tenho 24 anos, residente do Estado de São Paulo.
            Sou formada em História pela Universidade Estadual Paulista Júlio de Mesquita.
            Atualmente aperfeiçoando conhecimentos em Front-end, com pretenções de adentrar a área de TI. 
           <br> <strong>Email:aline.c.araujo@unesp.br</strong>
        </p>
        <h2 class="apresentacao__conteudo__titulo">Experiências</h2>
        <p class="apresentacao__conteudo__texto">
        <ul class="experiencia">
            <li> Escola O Pequeno Aprendiz (Abril/2022 - Dezembro/2022) - Estágiaria bolsista. Supervisionando e Auxiliando na adaptação de crianças especiais. </li>
            <li> Cursinho Pré-Vestibular UNESP de Assis (Fevereiro/2022 - Dezembro/2022) - Professora de História. </li>
            <li>Prefeitura de Assis (Março de 2023 - Atual) </li>
        </ul>
        </p>
        <h2 class="apresentacao__conteudo__titulo">Estudos</h2>
        <div class="apresentacao__conteudo__texto">
        <ul class="estudos">
            <li>Formação em História - UNESP (fevereiro de 2019 - Fevereiro de 2023) <a href="/rvdd_6129107.pdf">diploma</a></li>
            <li>HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags - Alura Cursos <a href="https://cursos.alura.com.br/user/aline-c-araujo/fullCertificate/6932961697eaabef83d4545c20b6085e">com certificado</a> </li>
            <li>HTML e CSS: Classes, posicionamento e Flexbox - Alura Cursos <a href="https://cursos.alura.com.br/user/aline-c-araujo/fullCertificate/6932961697eaabef83d4545c20b6085e">com certificado</a></li>
            <li>User Experience - FIAP <a href="8ef5160f04d781822c8d959302683a16.png">com certificado</a> </li>
           <li>Instrodução a Redes de Computadores - Fundação Bradesco <a href="Escola Virtual - Fundação Bradesco.pdf">com sertificado</a></li>
           <li>Educação Especial: histórico, políticas e práticas - UFSCAR - PoCA <a href="/Educação_Especial_histórico,_políticas_e_práticas-Certificado_191878.pdf">com certificado</a></li>
            <li>Programa de Formação na Área de Acervos - CEDAP</li>
            <li>Inglês - PBF</li>
            <br>
        <h2 class="qualificacoes">Qualificações Complementares</h2>
        <br>
        <p class="apresentacao__conteudo__texto">Conhecimento em Excel, Planner, Word, SharePoint, PowerPoint, Manutenção de Hardware, Informática.</p>
        </ul>
        </div>    
    </section>
    <img class="eu" src="/eu.png" alt="Foto da Aline Cardoso">
    </main> 
    </html>

``` **CÓDIGO CSS**
.eu {
         width: 50%;


     }
     .qualificacoes {
        color: var(--cor-secundaria);
        display: flex;
        font-size: 2rem;
       font-family: 'roboto slab' serif;

     }

     .me {
        display:inline;
        color:var(--cor-secundaria);
        font-family: 'roboto slab' serif;
        font-size: 1.75rem;
       margin: 0%;

     }
.estudos {
    color: var(--cor-secundaria);
    margin: 0%;
}

.experiencia {
    color:var(--cor-secundaria);
    font-family: 'roboto slab' serif;
    font-size: 1.75rem;
   margin: 0%;
}

.apresentacao_curriculo {
    padding: 2% 18%;
    display:flex;
    align-items: center;
    justify-content: space-between;

}
.cabecalho_curriculo {
    padding: 2% 0% 0% 20%;
    font-family: 'roboto slab' serif;
    text-decoration: none;
    color: var(--cor-terciaria);
    font-weight: 600;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
 }

@media (max-width: 1200px) {
    .cabecalho {
        padding: 10%;
    }
    .cabecalho_menu {
        justify-content: center;
    }
    .apresentacao {
        flex-direction: column-reverse;
        padding: 5%;
    }
    .apresentacao__conteudo {
        width: auto;


}
    .apresentacao_curriculo {
        justify-content: center;
        padding: 10%;
        flex-direction: column-reverse;
    }


}
3 respostas

Olá, Aline.

Tudo bem?

Eu testei uma solução aqui e funcionou, como eu fiz:

Na versão responsiva dentro do @media na classe .apresentacao__conteudo tem um width: auto;, eu troquei para width: 100%; ficou melhor, ai o conteúdo todo pega 100% da largura total da tela de celular, ai só ajustei os elementos que estavam ultrapassando o tamanho da tela, no caso só o email que estava ultrapassando ai diminui o tamanho da fonte e resolveu, que é o <strong>Email:aline.c.araujo@unesp.br</strong> ficou legal. Veja como ficou, eu só não tenho as suas cores pois não veio o código do root por isso tá com fundo branco, e também não tenho a sua imagem, mas de resto é o seu código todinho:

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

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.

Oi, Aline!

Vi que o Renan te ajudou na sua dúvida. Deixa só eu dar um outro pitaco aqui de algo que percebi quando fui tentar resolver o problema.

A estrutura que você usou no código HTML está fora do padrão. Seu <body> está vindo antes do <head> e o <main>, que deveria estar dentro do <body> está depois do <head>. O certo seria colocar o seu <head> primeiro e depois o <body> contendo todos os elementos que você quer na sua página, inclusive o <main>.

Nesse caso não chegou a dar nenhum problema, mas pode ser que em outra situação dê. ;)

Verdade Moana, boa percepção. Valeu :D