Custom header height issue in ionic 4

Ionic Framework ionic-v3
1

Hi,
Here I am giving custom height to header, which causes issue in different type of ios Devices, like buttoned devices and without button devices. I mean, iPhone X (without button device) and iPhone8 (with button device).

Here I am attaching screenshot for more detail…
My content goes beside header in iphone x


image
image991×963 364 KB

Here I use below code for increase header height. If I use normal header which is provided by default by ionic, then there is no issue.

HTML file

<ion-header class="home-header">
  <ion-toolbar>
    <ion-title class="padd0">
      <div class="flex-header">
        <div class="flex-header-child menu_btn">
          <ion-buttons slot="start" class="menu-btn">
            <ion-menu-button color="medium">
              <div class="bar-menu">
                <span class="bar-single"></span>
                <span class="bar-single"></span>
                <span class="bar-single"></span>
              </div>
            </ion-menu-button>
          </ion-buttons> 
        </div>
        <a [routerLink]="['/']" routerDirection="forward" class="ibp-logo logo1 active flex-header-child">
          <img src="../assets/images/logo.png" class="img-responsive" alt="" title="">
        </a>
        <span>&nbsp;</span>
      </div>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="v4 home-content">
...
</ion-content>

.css file

.home-header,.home-header>*,.home-header ion-title, .home-header .flex-header,ion-toolbar, ion-header 
{
    height:60px;
    --height:60px;
    --min-height: 60px;
    min-height:60px;
    --max-height: 60px;
    max-height: 60px;
    background:#cfb57e;
    --background:#cfb57e;
}
2

Need to add css media queries for different devices, that would fix your issue.

3

I had tried, but not worked.

4

What have you tried? Post your code.