Texto do HEADER e FOOTER SENDO CORTADO PARCIALMENTE no IOS

Oi Eduardo, tudo bem? Poxa, que legal a sua pergunta! Me vi nesse exato dilema quando comecei a trabalhar com ionic. O grande desafio de trabalhar com aplicativos Android e iOS são as diferenças entre o layout delas. As vezes o mesmo código não funciona corretamente para as duas plataformas. As diferenças são comuns dependendo da resolução e tamanho da tela do seu dispositivo. Por isso as vezes o código do instrutor não resulta na mesma coisa que o seu caso seu emulador tenha configurções diferentes. Uma dica valiosa que eu aprendi e te repasso é que sempre use tamanhos mais intermediários tendo como base o iOS. O que fica bom no ios normalmente fica no android. Mas, o que fica bom no android geralmente não fica no iOS (dica de ouro hahaha).

Sugiro que não trabalhe com tamanhos relativos, pense sempre em pixels. Como por exemplo, trocar o font-size do título:

#titulo{
  background-color: rgb(185, 185, 185);
  text-align: center;
  font-size: 16px; // De medium para 16, por exemplo
  color: black;
  width: 100%;
  min-height: 50px;
}

Sugeri 16px, mas, brinque com os tamanhos e veja qual te agrada mais e que na sua opinião gera um maior custo x benefício para a harmonia do layout que você está criando. Eu sei que as vezes pode parecer um pouco estranho relativizar o código de um com base no outro, o correto seria funcionar igual para os dois, mas, são limitações da tecnologia. Ganhamos em 1 código servir para Android e iOS, mas, nos gera esse trabalho de sempre perceber se o a estrutura atende bem as duas plataformas.

Um forte abraço, espero ter respondido a sua dúvida e qualquer problema me chama aqui que te ajudo!

Bom estudo :)

Prezado Leonardo, bom dia!

Entendi perfeitamente sua resposta, porém, não encontro no projeto onde colocar essa propriedade CSS, até porque pesquisei em todo projeto e não encontro a propriedade #Titulo, talvez acredito que tenha que criá-la mas não consigo determinar em qual scss...

Tentei colocar em vários locais, mas não refletiu no projeto...

Disponibilizei meu projeto em: https://1drv.ms/u/s!Att5VuGyZBRV_T_qo4_EX14uJRVh?e=ca7D1z

Por favor veja se tem algo errado na estrutura, e onde devo colocar essas propriedades CSS.

Desde já agradeço muito sua atenção

EDUARDO AGOSTINHO

Aaaah, agora sim entendi a questão! Anteriormente eu achava que você já havia criado essa configuração de CSS. Esse código que você me mandou é o mesmo do print? Não achei nele as informações de endereço para testar o seu footer. Cada página no ionic carrega o seu próprio css em específico. Então por exemplo, nesse código que você me mandou existe a tela home, certo? Então em pages > home temos 3 arquivos. O home.html, home.scss e o home.ts. O css deve ficar dentro do home.scss.

Atenção!

Cada página tem um seletor próprio para ela no css. Se você colocar o código css dentro do home.scss sem o seletor, o ionic vai propagar esse estilo para todas as outras páginas.

Dentro do home.scss deixe ele assim:

page-home {
#container {
  text-align: center;

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;

  color: #8c8c8c;

  margin: 0;
}

#container a {
  text-decoration: none;
}

#titulo{
  background-color: rgb(185, 185, 185);
  text-align: center;
  font-size: medium;
  color: black;
  width: 100%;
  min-height: 50px;
}
}

O page-home {} é o seletor css para a sua home. Testa primeiro com o medium no tamanho do título, se estourar o tamanho segue a regra que eu passei de ir definindo por pixels.

Abração e desculpa a demora, formatei minha máquina recentemente. Precisei reinstalar o ambiente do ionic aqui para rodar o seu código.