Apesar de usar o mesmo código utilizado nas video-aulas, o espaçamento entre meu conteúdo e a imagem nao ficou igual ao do curso :(
9
respostas
respostas
Espaçamento
Boa noite, tudo bem? Você poderia anexar o seu código para que a gente dê uma olhada? Lembrando que o espaçamento é:
.apresentacao__conteudo {
width: 615px;
display: flex;
flex-direction: column;
gap: 40px;
}
Estou com a mesma dúvida, o meu código está igual mas a visualização ficou diferente. Percebi que ao reduzir a visualização da página para 80%, o espaçamento ficou semelhante ao do portfolio. Será que é algo em relação com a responsividade?
Boa noite pessoal! Também estou incomodada com esse probleminha...quando reduzo a tela, fica tudo desproporcional. Não deveria ajustar automaticamente? Tentei mudar algumas coisas, mas não resolveu...tirei o reset que estava e coloquei igual o da aula, tentei mexer na margem tb...poderiam me ajudar? Meus códigos:
<!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>Portfólio</title>
<!-- <link rel="stylesheet" href="reset.css"> -->
<link rel="stylesheet" href="style.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&family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<header></header>
<main class="container">
<section class="container__conteudo">
<h1>Eleve seu negócio digital a outro nível <strong>com um Front-end de qualidade!</strong></h1>
<p>Olá! Sou Patricia Hintze, desenvolvedora Front-end com especialidade em HTML, CSS e Javascript.
Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?
</p>
<div class="buttons">
<a class="buttonstyle" href="https://instagram.com/patihintze">Instagram</a>
<a class="buttonstyle" href="https://github.com/patihintze">Github</a>
</div>
</section>
<img src="imagem.png" alt="Foto Patricia">
</main>
<footer></footer>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
head {
font-family: 'Krona One', sans-serif;
font-family: 'Montserrat', sans-serif;
}
body {
background-color: black;
color: #F6F6F6;
height: 100vh;
box-sizing: border-box;
}
strong {
color: #22D4FD;
}
.container {
margin: 10% 15%;
display: flex;
justify-content: space-between;
align-items: center;
}
.container__conteudo {
width: 615px;
height: 482px;
display: flex;
flex-direction: column;
gap: 40px
}
h1{
font-family: 'Krona One', sans-serif;
font-size: 36px;
line-height: 56px;
}
p {
font-family: 'Montserrat', sans-serif;
font-size: 24px;
line-height: 36px;
}
.buttons {
display: flex;
justify-content: space-between;
}
.buttonstyle {
background-color: #22D4FD;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
color: #000000;
font-weight: 600;
font-size: 24px;
line-height: 36px;
padding: 16px 0;
width: 280px;
border-radius: 16px;
text-align: center;
}
Oi Patricia, boa noite
vc colocou um height desnecessário aqui
.container__conteudo {
width: 615px;
height: 482px;
display: flex;
flex-direction: column;
gap: 40px
}
No meu projeto fica com a barra de rolagem, mesmo seguindo todos os procedimentos das aulas. Como corrigir?
Suellen, muito obrigada!! Realmente...não tinha percebido. Acabei colocando porque vi lá no figma.
Thiago, isso ocorre devido ao height = 100vh, no CSS do body. Você pode notar que se retirar esta propriedade, o scroll irá sumir.
Espero ter ajudado!!
Parece que o código usado em aula não é responsivo mesmo kkk
Eu uso um notebook com uma tela minúscula e os espaçamentos ficaram bem zoados, tive que reduzir o zoom do navegador para 75% para "resolver" e ficar parecido com o projeto do figma.
Oi Thamyrs não é responsivo, tem o viewport scale para melhor adaptar a página, mas não é responsivo!