Eu fui no "style.css"e na linha "95" eu substitui "font-size: 72px;" por "font-size: 50px;". Daí diminuiu o texto do título e arrumou. Mas minha dúvida é: por que bugou dessa forma? Antes de mexer no css, só arrumava se abaixasse o zoom para 90%. Isso depende do tamanho da tela? Se sim isso é um problema pois não vai funcionar igual para todos os dispositivos e tamanhos de tela.
Bom dia!
Correto! Fixando o tamanho da fonte, dependendo do tamanho da tela irá desconfigurar.
A unica forma que eu conheço de acertar isso é via CSS, com media queries, onde você consegue definir em qual largura vai haver modificação, por exemplo:
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
p{
font-size: 10px;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
p{
font-size: 12px;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
p{
font-size: 14px;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
p{
font-size: 9px;
}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
p{
font-size: 7px;
}
}
Espero ter ajudado. Se sua dúvida foi sanada, marque este tópico como solucionado.
Bons estudos!
O primeiro "@media only" não seria inútil? Porque o segundo "@media only" já define o intervalo "(min-width: 768px) and (max-width: 959px)", sendo o (max-width: 959px) o mesmo valor do primeiro "@media only". Assim, também com o terceiro "@media only", porque o quarto "@media only" já define o intervalo "(min-width: 480px) and (max-width: 767px)", sendo o (max-width: 767px) o meso valor do terceiro "@media only".