.not-supported{
  display: none;
}

@media (pointer: coarse){

  .container{
    display: none;
  }

  .not-supported{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -150px;
    width: 300px;
    height: 100px;
    text-align: center;
    color: red;

  }

  .not-supported::after{ content: "This web application is not supported by mobile devices" }
}




/*@media (pointer: coarse) {

  .container{
    display: none;
  }

  .not-supported{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -150px;
    width: 300px;
    height: 100px;
    text-align: center;
    color: red;

  }
}*/