Search code examples
htmlcssmedia-queries

How can I display an overlay if viewport is mobile?

I have a CRM (custom php website) and when the viewpoint is changed to that of a mobile, I want to add an overlay div which disables the user from using it (e.g. "Sorry, this crm is only available on iPads or Desktops").

How could I do this? Yes I know its 2018 and websites should be mobile first but a client has specifically asked for this.

Solution

  • You can achieve it with fixed div overlay.

    HTML

    <body>
...
<div class="mobile-blocker">Sorry, this crm is only available on iPads or Desktops</div>
</body>

    CSS

    .mobile-blocker {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 100001;
   background: #000;
   color: #fff;
   text-align: center;
   display: none;
}

@media all and (max-width: 1023px) {
   .mobile-blocker {
       display: block;
   }
}

    You can style and customize the content of this block however you want. This is just a basic idea.