Gostaria de saber porque que quando no meu projeto eu uso essa propriedade não há alteração. Porque a ideia, é que os conteúdos tenham espaço entre si. Mas olhando no meu, parece que não há mudança, o jeito que eu consigo enxergar é se eu dimunuir o zoom do meu projeto na web.
Estou enviando um print de como está
E o Projeto do curso, quando se insere o align items, temos o seguinte aspecto:
colocarei o código do projeto em uma outra dúvida para não ficar muito longo aqui
Oi Juliana, tudo bem?
Sinto muito que você esteja enfrentando esse problema. Vamos resolvê-lo!
Primeiramente, vamos verificar algumas possíveis causas para esse comportamento. Certifique-se de que o container que está usando a propriedade justify-content: space-between tenha espaço suficiente para distribuir os itens corretamente. Você pode ajustar a largura do container ou verificar se não há margens ou preenchimentos excessivos nos elementos dentro dele.
Além disso, é essencial garantir que não existam propriedades CSS conflitantes que possam afetar a distribuição dos itens. Revise todas as regras CSS aplicadas ao container e aos elementos filhos.
Uma dica útil é utilizar as ferramentas de desenvolvedor do navegador para inspecionar os elementos, verificar estilos aplicados e detectar possíveis problemas. Isso pode ajudar a identificar rapidamente o que está interferindo na distribuição dos itens.
Por fim, verifique se o navegador que você está usando está atualizado para a versão mais recente, pois problemas de compatibilidade podem ocorrer em versões mais antigas.
Se você puder copiar e colar o código completo do projeto, ou compartilhar um link para o projeto, conseguirei te ajudar de forma mais detalhada e precisa!
Espero que essas dicas sejam úteis! Estou aqui para ajudar, então não hesite em me contatar se precisar de mais assistência.
Olá, eu usei seu código aqui e funcionou, vou deixa aqui abaixo o código que testei.
<main class= "apresentacao">
<section>
<h1>Eleve seu negócio digital a outro nível
<strong class="titulo-destaque">com um Front end de qualidade! </strong></h1>
<p>olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocare
nv a colocarem em prática boas ideias. Vamos conversar? </p>
<a href="https://instagram.com/rafaballerini">Instagram</a>
<a href="https://github.com/guilhermeonrails">Github</a>
</section>
<img src="imagem.png" alt="Foto da Joana Santos progamando">
</main>
.apresentacao {
display: flex;
align-items: center;
justify-content: space-between;
}
vou te recomendar também esse site da documentação do flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
vou deixa o meu codepen onde testei o código, caso queira ver: https://codepen.io/Daniel-Alves27/pen/YzRMeQd
Vou enviar aqui o código conforme solicitado
Por algum motivo eu não consigo mandar meu código aqui, ele fica desse jeito. Como que eu posso fazer?
tem alguma forma em que eu consiga compartilhar pelo próprio vscode?
tenta usar esse exemplo da imagem abaixo para compartilhar seu código aqui.
caso não consiga, tenta usar o github ou codepen.
<!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>Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header></header>
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1>Eleve seu negócio digital a outro nível
<strong class="titulo-destaque">com um Front end de qualidade!</strong></h1>
<p>Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem
a colocarem em prática boas ideias. Vamos conversar? </p>
<a href="https://instagram.com/rafaballerini">Instagram</a>
<a href="https://github.com/guilhermeonrails">Github</a>
</section>
<img src="imagem.png" alt="Foto da Joana Santos progamando">
</main>
<footer></footer>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body {
height: 100vh;
box-sizing: border-box;
background-color: black;
color: hwb(0 100% 0%);
}
.titulo-destaque {
color: #22D4FD;
}
.apresentacao {
margin: 10%;
display: flex;
align-items: center;
justify-content: space-between;
}
.apresentacao__conteudo {
width: 615px;
}
O problema está ocorrendo devido à diferença de resolução do seu monitor, o que está causando essa diferença no projeto. Para solucionar esse problema, eu recomendo que você utilize o modo desenvolvedor do navegador. Para ativá-lo, basta pressionar a tecla F12 no teclado. Isso fará com que o seu navegador fique da seguinte forma:
Dessa forma você poderá ajustar a resolução da melhor maneira possível.
Quanto à essa linha de código, ela não é necessária.
.apresentacao__conteudo {
width: 615px;
}
Não entendi, o comando f12 deve ser usado no próprio chrome? ou no vscode aonde estou escrevendo o projeto?
Consegui mudar, era pelo próprio chrome. Ficando dessa forma
Porém, se eu fecho o inspecionar, aparenta que o projeto está da mesma forma.
depois que alterei o tamanho da dimensão, ele meio que não volta ao que era. O tamanho da imagem tá muito grande
