Olá Bom dia, então terminei o projeto porem estava utilizando zoom de 50%, e quando coloco a tela cheia em 100% quebra toda a pagina como arrumo isso?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá Bom dia, então terminei o projeto porem estava utilizando zoom de 50%, e quando coloco a tela cheia em 100% quebra toda a pagina como arrumo isso?
Oi, Lucas! Tudo bem com você?
Gostaria de pedir que você enviasse o código do seu projeto para que eu consiga entender melhor o seu problema e identificar em qual dos arquivos se encontra o erro mencionado.
Você pode copiar e colar o código aqui na resposta ou enviar o seu projeto em uma pasta compactada.
Aguardo o seu retorno.
<!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>Projeto 1.0</title>
<link rel="stylesheet" href="./style/style.css">
</head>
<body>
<header>
<nav>
<a class="NavLink" href="index.html">Home</a>
<a class="NavLink" href="sobreMim.html">Sobre Mim</a>
</nav>
</header>
<main>
<section>
<h1>Eleve seu negócio digital a outro nivel <strong>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 colocorem em prática boas ideias. Vamos conversar?</p>
<div>
<h2>Acesse minhas redes:</h2>
<a class="link" href="https://www.figma.com/file/X2CtoibOcBpChtYnyBIcbB/Portfolio---Curso-1-(Copy)?node-id=0%3A1&t=KNOojAjPvo7tMpKW-0"><img src="assets/linkedin.png" alt=""> Linkedin</a>
<a class="link" href="https://www.figma.com/file/X2CtoibOcBpChtYnyBIcbB/Portfolio---Curso-1-(Copy)?node-id=0%3A1&t=KNOojAjPvo7tMpKW-0"><img src="assets/github.png" alt=""> GitHub</a>
<a class="link" href="https://www.figma.com/file/NrzJacC887svMVfF9oC2jM/Portfolio-Projeto-2?node-id=1%3A89&t=esYPEt4t5NNASMN3-0"><img src="assets/twitch.png" alt=""> Twitch</a>
</div>
</section>
<img src="./assets/Imagem.png" alt="Foto da Joana Santos programando.">
</main>
<footer>
<p>Desenvolvido por Alura.</p>
</footer>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
:root {
--cor-primaria: rgb(25, 25, 25);
--cor-segundaria: #FFD6BA;
--cor-terciaria: #008C94;
}
* {
margin: 0px;
padding: 0px;
}
body {
background-color: var(--cor-primaria);
box-sizing: border-box;
}
header{
}
nav{
display: flex;
padding: 30px 500px;
}
nav a{
color: var(--cor-terciaria);
border: none;
font-size: 24px;
font-family: 600;
font-family: 'Montserrat', sans-serif;
}
main {
display: flex;
align-items: center;
justify-content: space-between;
margin: 5% 25% 10% 25%;
}
section{
width: 615px;
height: 482px;
display: flex;
flex-direction: column;
gap: 50px;
}
h1{
font-family: 'Krona One', sans-serif;
font-size: 36px;
color: var(--cor-segundaria);
}
strong {
color: var(--cor-terciaria);
}
p {
color: var(--cor-segundaria);
font-size: 24px;
font-family: 'Montserrat', sans-serif;
}
div{
display: flex;
flex-direction: column;
align-items: center;
}
h2{
color: var(--cor-segundaria);
font-size: 24px;
font-weight: 400;
font-family: 'Krona One', sans-serif;
margin-bottom: 10px;
}
a{
display: flex;
justify-content: center;
gap: 15px;
border-style: solid;
border-color: var(--cor-terciaria);
width: 355px;
border-radius: 16px;
font-size: 24px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
color: var(--cor-segundaria);
text-decoration: none;
text-align: center;
margin: 10px 0;
padding: 15px 0;
}
a:hover{
background-color: grey;
}
footer{
background-color: var(--cor-terciaria);
padding: 24px;
text-align: center;
}
footer p{
color: var(--cor-primaria);
font-size: 28px;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
}
Obrigada por compartilhar o seu código, Lucas! Ao analisar ele, observei algumas alterações que podemos fazer. Vejamos:
Em seu código CSS, no seletor section encontra-se valores em pixels, vamos modificar ambos para 100%, uma vez que pixel é uma medida fixa e porcentagem uma medida de proporção. Dessa forma, teremos um conteúdo ajustado proporcionalmente a página, independente do tamanho da tela em que for exibido.
E para que a imagem não se sobreponha ao texto, no seletor main vamos substituir os números de marginpara 5% e 15 %, é importante mantermos esse padrão de medidas para que a distância do topo e base, lado direito e esquerdo do elemento, se ajuste de forma proporcional e igualitária.
O código completo e modificado ficará assim:
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
:root {
--cor-primaria: rgb(25, 25, 25);
--cor-segundaria: #FFD6BA;
--cor-terciaria: #008C94;
}
* {
margin: 0px;
padding: 0px;
}
body {
background-color: var(--cor-primaria);
box-sizing: border-box;
}
header{
}
nav{
display: flex;
padding: 30px 500px;
}
nav a{
color: var(--cor-terciaria);
border: none;
font-size: 24px;
font-family: 600;
font-family: 'Montserrat', sans-serif;
}
main {
display: flex;
align-items: center;
justify-content: space-between;
margin: 5% 15%;
}
section{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 50px;
}
h1{
font-family: 'Krona One', sans-serif;
font-size: 36px;
color: var(--cor-segundaria);
}
strong {
color: var(--cor-terciaria);
}
p {
color: var(--cor-segundaria);
font-size: 24px;
font-family: 'Montserrat', sans-serif;
}
div{
display: flex;
flex-direction: column;
align-items: center;
}
h2{
color: var(--cor-segundaria);
font-size: 24px;
font-weight: 400;
font-family: 'Krona One', sans-serif;
margin-bottom: 10px;
}
a{
display: flex;
justify-content: center;
gap: 15px;
border-style: solid;
border-color: var(--cor-terciaria);
width: 355px;
border-radius: 16px;
font-size: 24px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
color: var(--cor-segundaria);
text-decoration: none;
text-align: center;
margin: 10px 0;
padding: 15px 0;
}
a:hover{
background-color: grey;
}
footer{
background-color: var(--cor-terciaria);
padding: 24px;
text-align: center;
}
footer p{
color: var(--cor-primaria);
font-size: 28px;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
}
`Realize as modificações, faça o teste e me conte se funcionou!
Continue praticando os exercícios como vem fazendo e qualquer dúvida estarei à disposição para ajudá-lo.
Bons estudos!