Minha página está ficando da seguinte maneira quando tento abrir ela pelo meu celular, a mesma só fica como é mostrado na aula se eu coloco a opção "para computador" no Chrome.!
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
Minha página está ficando da seguinte maneira quando tento abrir ela pelo meu celular, a mesma só fica como é mostrado na aula se eu coloco a opção "para computador" no Chrome.!
```<!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>Portifólio</title>
<link rel="stylesheet" href="./styles/styles.css">
</head>
<body>
<header class="cabecalho">
<nav class="cabecalho__menu">
<a class="cabecalho__menu__link" href="index.html">Home</a>
<a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
<a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>
</nav>
</header>
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="apresentacao__conteudo__titulo__destaque">com um Front-end de qualidade!</strong></h1>
<p class="apresentacao__conteudo__texto">Olá! Sou Eric Campos, desenvolvedor Front-end com especialidade em, HTML, CSS, Javascript e Java. Ajudo pessoas e pequenos negócios a colocarem em prática boas ideias. Vamos conversar?</p>
<div class="apresentacao__links">
<p class="apresentacao__links__subtitulo">Acesse minhas redes:</p>
<a class="apresentacao__links__navegacao" href="https://github.com/ericrc77">
<img src="assets/github.png" alt="icone_github" class="apresentacao__links__navegacao__imagem">
GitHub
</a>
<a class="apresentacao__links__navegacao" href="https://instagram.com/ericzuka">
<img src="assets/instagram.png" alt="icone_instagram" class="apresentacao__links__navegacao__imagem">
Instagram
</a>
</div>
</section>
<img class= "apresentacao_imagem" src="assets/perfil 2.0.jpeg" alt="perfil" class="foto">
</main>
<footer class="rodape">
<p>Desenvolvido por Eric Campos</p>
</footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@600&display=swap');
:root{
--cor-primaria: #000000;
--cor-secundaria: #f6f6f6f6;
--cor-terciaria: #22d4fd;
--cor-quartaria: #5002AC;
}
*{
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
/* height: 100vh; */
background-color: var(--cor-primaria);
color: var(--cor-secundaria);
display: flex;
flex-direction: column;
}
.cabecalho{
padding: 2% 0 0 15% ;
}
.cabecalho__menu{
display: flex;
gap: 80px
}
.cabecalho__menu__link{
color: var(--cor-terciaria);
font-family: "Montserrat", sans-serif;
font-size: 1.5rem;
font-weight: 600;
text-decoration: none
}
.apresentacao{
display: flex;
align-items: center;
justify-content: space-between;
padding: 5% 15%;
gap: 82px;
}
.foto{
width: 300px;
height: 300px;
}
.apresentacao__conteudo{
width: 50%;
display: flex;
flex-direction: column;
gap: 40px;
}
.apresentacao__conteudo__titulo{
font-size: 2.25rem;
font-family: 'Krona One', sans-serif;
width: 593px;
}
.apresentacao__conteudo__titulo__destaque{
color: var(--cor-terciaria);
}
.apresentacao__conteudo__texto{
font-size: 1.5rem;
font-family: 'Montserrat', sans-serif;
}
.apresentacao__links{
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
gap: 32px;
}
.apresentacao__links__subtitulo{
font-family: 'Krona One', sans-serif;
font-weight: 400;
font-size: 1.25rem;
}
.apresentacao__links__navegacao{
display: flex;
justify-content:center;
gap: 16px;
border: 2px solid var(--cor-terciaria);
border-color: var(--cor-terciaria);
border-radius: 8px;
width: 50%;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 1.5rem;
color:var(--cor-secundaria);
text-decoration: none;
padding: 16px 0;
font-weight: 600;
}
.apresentacao__links__navegacao:hover {
background-color: #272727;
padding-top: 17px;
}
.apresentacao_imagem{
width: 50%;
}
.rodape{
background-color: var(--cor-terciaria); /* Defina uma cor de fundo diferente para o footer */
font-family: 'Montserrat', sans-serif;
color: var(--cor-primaria); /* Defina a cor do texto do footer para que seja visível */
text-align: center;
padding: 7px;
font-size: 1.5rem;
font-weight: 400;
margin-top: 50px ;
}
*{
zoom: 0.99;
}
.apresentacao__conteudo__nome{
font-size: 2rem;
font-family: 'Montserrat', sans-serif;
}
.apresentacao__conteudo__texto__curriculo{
font-size: 1.125rem;
font-family: 'Montserrat', sans-serif;
}
.apresentacao__conteudo__texto__curriculo__links{
text-decoration: none;
color: var(--cor-terciaria);
}
.apresentacao__conteudo__texto__curriculo__links:hover{
color: #ff343e;
}
.apresentacao__about{
display: flex;
align-items: center;
justify-content: space-between;
padding: 5% 0%;
flex-direction: column;
width: 1200px;
padding-bottom: 30px;
}
.apresentacao__conteudo__titulo__hablidades{
font-size: 1.25rem;
font-family: 'Krona One', sans-serif;
width: 593px;
}
.apresentacao__conteudo__texto__agradecimento{
font-size: 1.375rem;
font-family: 'Montserrat', sans-serif;
width:1000px;
}
@media (max-width: 1200px){
.cabecalho{
padding: 10%;
}
.cabecalho__menu{
justify-content: center;
}
.apresentacao{
flex-direction: column-reverse;
padding: 5%;
}
.apresentacao__conteudo{
width: auto;
}
}
Oi, Eric, tudo bem?
Esse problema de dimensão dos textos na página acontece, pois você definiu no arquivo "style.css" um tamanho fixo (por meio de uma medida absoluta) para a classe .apresentacao__conteudo__titulo, por meio da propriedade width: 593px;.
Uma solução para esse problema é alterar o valor fixo para um valor flexível (por meio de uma medida relativa). Ficaria assim:
.apresentacao__conteudo__titulo{
font-size: 2.25rem;
font-family: 'Krona One', sans-serif;
width: 100%;
}
Ou ainda, você pode remover a propriedade widthda classe .apresentacao__conteudo__titulo. Ficaria assim:
.apresentacao__conteudo__titulo{
font-size: 2.25rem;
font-family: 'Krona One', sans-serif;
Fique livre para optar pela forma que quiser para resolver o problema.
Caso queira entender um pouco mais sobre as medidas absolutas e relativas utilizadas no CSS, recomendo a leitura do artigo abaixo que aborda quais são essas medidas e as características de cada uma:
Espero ter ajudado. Caso tenha dúvidas, não hesite em postar no fórum!
Abraços!