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

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.

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:

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

• Propriedade word-wrap

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

Bons estudos!