Olá pessoal se alguém poder me ajudar nesse projeto, estou tentando arrumar o erro mais não consigo. Na web o projeto está ok, porém quando abro no celular a primeira página sai corta, e as demais saem corretas, como se o corpo e o titulo não ficasem responsivos. Alguma dica do que eu posso fazer ?
hoje, com a Alura e o Google Gemini
Opa Samanta, tudo bem?
Peço desculpa pela demora em obter um retorno.
Analisando seu código percebi que na área de responsividade, onde lida com os media queries, foi definido como padrão que as larguras do título e do parágrafo de apresentação ficassem no automático, não tendo um valor definido:
.apresentacao__titulo {
width: auto;
}
.apresentacao__conteudo {
width: auto;
}Além disso, como temos uma palavra extensa, mesmo acertando a largura ainda acabamos por quebrar a responsividade, para consertar esse fator podemos usar a propriedade word-wrap, essa propriedade quando atribuída o valor word-break é capaz de partir uma palavra se ajeitando ao conteúdo.
Adicionando o word-break e definindo um valor fixo para a largura, nesse caso usaremos 100%, as alterações nosso código ficaria assim:
.apresentacao__titulo {
width: 100%;
word-wrap:break-word;
}
.apresentacaoconteudo {
width: 100%;
}
Prontinho! Assim conseguiremos o resultado desejado no mobile.
Caso queira aprender mais sobre deixo abaixo a documentação:
Fico à disposição.
Tenha um bom dia e bons estudos.