Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] como fazer a a letra diminuir na tela inicial do jogo numero secreto

Estou na parte um na quarta aula do curso ( lógica de programacão explore funcões e listas),e quando programei para aparecer jogo do número secreto na tela inicial do jogo ela apareceu mas as letras estavam bem maiores que a do vídeo e já que fica muito grande ela sai da borda do desenho da tela aí acaba ficando feio, não sei como arrumar nem diminuir a letra

1 resposta
solução!

Oi!

1) Primeiro, verifique o zoom da página

Confira se o zoom do navegador está em 100%:

  • Chrome/Edge/Brave: Ctrl + 0 (Windows) ou Cmd + 0 (macOS) para resetar o zoom.
  • Na barra do navegador, o ícone de zoom deve mostrar 100%.
  • No Windows, conferir também o Scale do sistema: Configurações → Sistema → Tela → Escala (100%–125% é comum; se estiver 150%+, tudo fica maior).

Dica extra: o seu HTML já tem <meta name="viewport" content="width=device-width, initial-scale=1.0">, então o zoom de sistema/navegador influencia bastante.

2) Deixe o título responsivo (sem estourar)

No seu CSS o h1 está com 72px fixos. Troque por um tamanho responsivo usando clamp(), assim ele se adapta ao tamanho da tela:

h1 {
  font-family: 'Chakra Petch', sans-serif;
  /* de 32px até 72px, crescendo conforme a largura da tela */
  font-size: clamp(32px, 6vw, 72px);
  line-height: 1.1;         /* ajuda a não “sangrar” pelas bordas */
  padding-bottom: 3rem;
  text-wrap: balance;       /* melhora a quebra de linha em navegadores modernos */
  word-break: normal;
}

Se quiser garantir ainda mais, você pode reduzir um pouquinho o padding e limitar a largura do bloco de texto:

.container__informacoes {
  flex: 1;
  padding: 2rem;            /* era 3rem */
  max-width: 720px;         /* evita linhas muito longas */
}

.container {
  max-width: 1200px;        /* mantém o layout sob controle em telas grandes */
  width: 80%;
}

E, caso alguma palavra muito longa (ou número) esteja “empurrando” o layout, você pode forçar a quebra:

.container__texto {
  overflow-wrap: anywhere;  /* quebra palavras/números compridos */
}

Por que isso funciona?

  • clamp(min, ideal, max) deixa a fonte crescer/encolher conforme a largura da viewport sem passar de um limite saudável.
  • text-wrap: balance (quando suportado) melhora a distribuição das quebras de linha do título.
  • Limitar a largura dos blocos evita que textos grandes “encostem” nas bordas.

Um abraço e bons estudos.