Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Título ultrapassando a viewport no celular

Olá pessoal, estou com um probleminha em meu projeto após a publicação no vercel e gostaria de pedir a ajuda de vocês...

Após colocar o projeto no vercel, fui checar como estava o site em meu dispositivo móvel e o meu título ultrapassou os limites da tela (mesmo sem nenhuma alteração no CSS em relação ao que o Gui e a Rafa fizeram):

Visualização do título com problema

Visualização do título com problema

Este o link do projeto: https://portifolio-two-fawn.vercel.app/ Repositório: https://github.com/cahmoreira/portifolio-alura

Gostaria de saber como posso resolver este problema, de forma que o título se adeque no mobile. Agradeço desde já :)

2 respostas

Ola,

Você pode tentar:

  1. Reduzir o tamanho do título: Experimenta diminuir o tamanho da fonte do título para que ele se ajuste melhor à tela do dispositivo móvel. Por exemplo, você pode definir um tamanho de fonte menor para a classe .apresentacao-conteudo-titulo dentro da sua media query para telas menores.
@media (max-width: 600px) {
  .apresentacao-conteudo-titulo {
    font-size: 1.8rem; /* ou qualquer tamanho adequado */
  }
}
  1. Se o título for muito longo, pode ser útil quebrá-lo em várias linhas em dispositivos móveis para garantir que ele caiba na tela. Você pode usar a propriedade word-wrap ou overflow-wrap para fazer isso.
.apresentacao-conteudo-titulo {
  word-wrap: break-word; /* ou overflow-wrap: break-word; */
}

Documentação: https://www.w3schools.com/cssref/css3_pr_word-wrap.php#:~:text=Definition%20and%20Usage,wrap%20onto%20the%20next%20line.

solução!

Oii, Camila! Tudo joia?

Como sugestão, podemos deixar o título personalizado e responsivo para se ajustar à tela utilizando a propriedade word-wrap. Esta propriedade faz com o que as palavras não ultrapassem a largura do contêiner.

Exemplo de como ficaria no seu código:

.apresentacao-conteudo-titulo {
 font-size: 2.25rem;
 font-family: 'Krona One', sans-serif;
 word-wrap: break-word;
}

Como resultado:

Captura de tela mostrando o resultado da adição da propriedade word-wrap para poder centralizar o título.

Deixarei aqui um artigo que aborda sobre a propriedade para você ler:

Espero que dê certo! Qualquer dúvida, compartilhe no fórum.

Bons estudos!