Block UI in landscape mode

block-ui.css

  .block-ui__wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 99999;
      display: none;
      /*
      Change colors accordingly
      */
      background: #000;
      color: #fff;
  }

  @media (max-width: 767px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
    .full-content__wrapper {
      overflow: hidden;
      position: fixed;
      height: 100%;
      width: 100%;
    } 
    .block-ui__wrapper {
        /*
        This will work fine.
        */
        display: block;
        /*
        However, here is some extra snacks for you.
        To align everything in center.
        */
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
           -moz-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
           -moz-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
  }

block-ui.html

<div class="block-ui__wrapper">
    <p>Please change to portrait mode to further access our application</p>
</div>