Custom header height issue in ionic 4

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

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-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>
        <a [routerLink]="['/']" routerDirection="forward" class="ibp-logo logo1 active flex-header-child">
          <img src="../assets/images/logo.png" class="img-responsive" alt="" title="">

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

.css file

.home-header,.home-header>*,.home-header ion-title, .home-header .flex-header,ion-toolbar, ion-header 
    --min-height: 60px;
    --max-height: 60px;
    max-height: 60px;

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

I had tried, but not worked.

What have you tried? Post your code.