Entrar Ainda não tem acesso?
3
respostas

layout diferente

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Manipulando botões e atividade Posicionando os botões

por Leticia De Barros Costa
| 10.5k xp | 10 posts

o layout da página tá diferente em comparação ao da aula. o link tá colado na imagem

html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>projeto</title>
    <link rel="stylesheet" href="style.CSS">
</head>

<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="trecho_destaque">com um Front-end de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__paragrafo">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <div class="apresentacao__links">
                <a href="#">instagram</a>
                <a href="#">github</a>
            </div>
        </section>
        <section>
            <img class="apresentacao_imagem" src="Imagem.png" alt="imagem da Joana programando">

        </section>
    </main>
    <footer></footer>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
    box-sizing: border-box;
    margin: 0;       
    padding: 0;
}                   
body{
    box-sizing: border-box;
    height: 100vh;
    background-color: #000000;
    color: #F6F6F6;
    
}

.apresentacao{
    margin: 10%;
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.apresentacao__conteudo{
    width: 615px;
}

.apresentacao__conteudo__titulo{ 
    font-size: 36px;
    font-family: "Krona One", sans-serif;
}

.trecho_destaque{
    color: #22D4FD;
}

.apresentacao__conteudo__paragrafo{
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}

.apresentacao__links{
    display: flex;
    justify-content: space-between;
}
3 respostas
por Rafaela Petelin Silvério
| 747k xp | 1671 posts
Alura Scuba Team Monitora de Fórum

Oi Leticia! Tudo bem?

No seu código CSS, você já está usando Flexbox para a classe .apresentacao, o que é ótimo para alinhar elementos. No entanto, para garantir que a imagem e os links não fiquem colados, podemos adicionar um pouco de margem ou ajustar o layout.

Aqui está uma sugestão de como você pode ajustar seu CSS:

  1. Adicione uma classe para a seção que contém a imagem e defina uma margem à esquerda para afastá-la dos links:
.apresentacao_imagem {
    margin-left: 20px; /* Ajuste este valor conforme necessário */
}
  1. Certifique-se de que a classe .apresentacao__links tenha um espaçamento adequado entre os links e o restante do conteúdo:
.apresentacao__links {
    display: flex;
    justify-content: space-between;
    margin-top: 20px; /* Adiciona espaço acima dos links */
}
  1. Se necessário, ajuste o tamanho da imagem para que ela se encaixe melhor no layout:
.apresentacao_imagem {
    width: 100%; /* Ou defina um tamanho específico, como 500px */
    max-width: 300px; /* Limita o tamanho máximo da imagem */
}

Essas alterações devem ajudar a melhorar o layout e evitar que os links fiquem colados na imagem. Lembre-se de ajustar os valores de margem e tamanho conforme necessário para o seu design específico.

Espero ter ajudado. Conte com o apoio do fórum :)

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado
por Leticia De Barros Costa
| 10.5k xp | 10 posts

Oii Rafa, muito obrigada pela resposta, me ajudou muito, fiz os ajustes e solucionou o problema. Você sabe me dizer por que isso aconteceu? o código estava igual ao da aula mas as proporções do layout ficaram diferentes, isso sempre vai acontecer? vou sempre precisar fazer esses ajustes? Obrigada novamente!

por Rafaela Petelin Silvério
| 747k xp | 1671 posts
Alura Scuba Team Monitora de Fórum

Oi, Leticia!

Sobre sua última dúvida, isso pode acontecer por alguns motivos, mesmo que o código esteja igual ao da aula. Alguns fatores que podem influenciar a diferença no layout são:

  1. Tamanhos de tela diferentes: O código pode ter sido testado em um monitor ou resolução diferente da sua. Isso afeta o comportamento do Flexbox e de outras propriedades de layout.

  2. Configurações do navegador: Pequenas diferenças entre navegadores ou até zoom aplicado na página podem alterar a renderização dos elementos.

  3. Arquivos CSS não carregados corretamente: Se houver qualquer erro no link para o style.css, as configurações de espaçamento podem não ser aplicadas. No seu caso, note que você escreveu style.CSS, mas a extensão correta deve ser .css (minúscula). Isso pode impedir o carregamento correto do CSS.

  4. Fonte do Google Fonts: Dependendo da versão do navegador, a fonte pode carregar de forma diferente, alterando o tamanho e espaçamento dos textos.

Se quiser garantir que o layout se mantenha o mais fiel possível, você pode definir tamanhos fixos ou limites para os elementos principais, como os links e a imagem. Veja um exemplo de ajuste: 


.apresentacao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* Garante que os elementos se ajustem em telas menores */
}

.apresentacao__links {
    display: flex;
    gap: 16px; /* Adiciona um espaçamento fixo entre os links */
}

.apresentacao_imagem {
    max-width: 300px; /* Define um tamanho máximo para a imagem */
    width: 100%;
}

Isso evita que o layout fique colado ou desalinhado em telas diferentes.

Fico à disposição. Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓