Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Borda dos links maior mesmo com valores iguais da instrutora

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos, no capítulo Adaptando elementos e atividade Descubra a super unidade de medida

por Gabriel.pombo
| 102k xp | 13 posts

Ao chegar na aula "unidades de medidas" em HTML -Trabalhando com reponsividade..., quando vamos em inspecionar vemos que em aparelho celular os itens da página ficam desproporcionais, então vamos aplicar valores rem nas fontes e porcentagem na imagem. Quando a instrutora aplica 50% na imagem, ela diminui e vai mais para cima. Comigo isso aconteceu certinho, mas reparei que o footer não ajustou como na página da instrutora. Fiquei procurando o que poderia ser e percebi que a borda dos links (Github , Linkedin...) estão maiores que do texto subtítulo ( ACESSE MINHAS REDES). Então fui conferrir e tanto os valores dos meus links quanto do subtítulo estão iguais aos do código da instrutora. Aí não sei o que fazer. Código igual e resultado diferente.

dois problemas: 1-footer não completa a tela em aparelho celular como o da instrutora após ajustar imagem e

2- borda dos links maiores/ ultrapassam o texto subtítulo mesmo com valores iguais da aula.

4 respostas
por Renan Lima
| 3470.9k xp | 7333 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Gabriel, tudo bem?

Compartilha os seus códigos HTML e CSS aqui com a gente por gentileza. Você pode colar eles completos aqui mesmo, assim fica mlehor para ajudar visualizando o código.

Valeu.

por Gabriel.pombo
| 102k xp | 13 posts

O código html:

<!DOCTYPE html>
<html lang="pt-br">
<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>HTML ESTUDO</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="curriculo.html">Currículo</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo"> Desenvolvedor Front- end em treinamento, começando com
            <strong class="titulo-destaque">Javascript, HTML e CSS!</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Ainda não decidi o que vou colocar aqui.</p>

            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes</h2>
                <a class="apresentacao__links__link" href= "https://github.com/gabiss">
                    <img src="./assets/github.png">
                    Github
                </a>
                <a class="apresentacao__links__link" href=https://www.linkedin.com/in/gabriel-76748927>
                    <img src="./assets/linkedin.png">
                    Linkedin
                </a>
            </div>
        </section>
        <img class="apresentacao__imagem" src="./assets/foto figma.png" alt="foto Gabriel">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Gabriel</p>
    </footer>

</body>
</html>

E o CSS:

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,700;1,300&display=swap');

:root {
    --cor-primaria: #000000;
    --cor-secundaria: #F6F6F6;
    --cor-terciaria: #22D4FD;
    --cor-hover: #272727;

    --fonte: 'Lato', 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);
    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;
}

.apresentacao__conteudo{
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;;
}

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


}

.apresentacao__imagem{
    width: 50%;
}

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

.apresentacao__conteudo__texto{
    font-size: 1,5rem;
    font-family: var(--fonte);
    text-decoration: none;

}

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

.apresentacao__links__subtitulo{
    font-family: var(--fonte);
    font-weight: 400;
    font-size: 1,5rem;
}

.apresentacao__links__link{
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid var(--cor-terciaria);
    width: 378px;
    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);
}

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

.rodape{
    padding: 24px;
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    text-align: center;
    font-family: var(--fonte);
    font-size: 1,5rem;
    font-weight: 400;   
}
solução!
por Renan Lima
| 3470.9k xp | 7333 posts
Alura Scuba Team Apoio Educacional - Alura

Primeiro em relação a borda, na classe .apresentacaolinkslink você atribuiu uma largura fixa com o width: 378px;, segundo o projeto final essa largura deve ser width: 50%;, eu testei e ficou legal, e você pode adicionar um align-items: center; para o texto e o icone ficarem centralizados.

Se você reparar o rodpé já esta certo, o resto dos elementos que devem estar maiores que a tela, porque tem elementos, no caso os links estavam assim, e a sua imagem estava á direita ainda, segundo seu código, se não ajustar certinho, a tela fica maior que a de celular. resolvendo isso a parte de cima dos elementos o rodapé vai indireitar sozinho.

Analisa certinho e compara com o código da aula.

por Gabriel.pombo
| 102k xp | 13 posts

Era isso mesmo, muito obrigado!!!