Entrar Ainda não tem acesso?
1
resposta

meu vh não funciona

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Posicionando mais elementos e atividade Height e box-sizing

por Pedro Henrique Nick de Faria
| 57k xp | 22 posts
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

</head>
<body>
    <header></header>
    <main class="apresentacao">
        <section>
            <h1 class="titulo">Eleve seu negócio digital a outro nível <strong class="forte">com um Front-end de qualidade!</strong></h1>
            <p class="texto">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>
            <a href="#">Instagram</a>
            <a href="#">GitHub</a>
       </section>>
        <img src="img/Imagem.png">
    </main>
    
</body>
</html>

* {
    margin: 0;
    padding: 0;
    

 }


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

.forte{
    color: #22d4fd;
}

.titulo{
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
}


.texto{
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}
1 resposta
por Renan Cezar Wuicik
| 2976k xp | 6107 posts
Instrutor Suporte Educacional Start By Alura

Olá, Pedro! Tudo bem?

Pelo código que você compartilhou, parece que você está tentando definir a altura do corpo do seu documento HTML usando a unidade de medida vh. No entanto, você mencionou que o "vh não funciona".

Ao analisar o seu código, não encontrei nenhum problema com a definição da altura usando vh. O problema pode estar relacionado a outros fatores, como a estrutura do seu documento HTML ou a forma como você está visualizando a página.

Uma possível solução seria verificar se você está visualizando a página em um ambiente que suporta a unidade de medida vh. Alguns navegadores mais antigos podem não oferecer suporte completo a essa unidade de medida. Nesse caso, você pode tentar visualizar a página em um navegador mais atualizado.

Além disso, certifique-se de que a estrutura do seu documento HTML está correta, com todas as tags de abertura e fechamento corretamente definidas. Um erro de estrutura pode interferir no funcionamento correto das propriedades CSS.

Só pra avisar que o fechamento da seção está com um pequeno problema, ele está com duas setas de fechamento olha: </section>>, só conserte isso para evitar problemas futuros no código tá. Outra coisa a tag na segunda linha está com o parâmetro "en" e tem que estar como "pt-br" para configurar como a lingua protuguesa tá, dessa forma aqui: <html lang="pt-br">.

Ah e o titulo da página está como "Document", troque ele para por exemplo isso: <title>Meu primeiro portfólio</title>.

Da parte do CSS, caso você não conseguir resolver o problema com o vh, só troque por porcentagem, e assim coloque na tag body isso: height: 100%; que o resultado será o mesmo tá.

Se o problema persistir, seria útil fornecer mais informações sobre o que exatamente não está funcionando ou compartilhar um exemplo mais específico do que você está tentando alcançar. Dessa forma, poderei ajudá-lo de maneira mais precisa.

Espero ter ajudado, caso precise eu estarei aqui!

Abraços e bons estudos!