Css 显示：无不工作。尝试建议的解决方案都没有成功

我试图让

display:none

在更小的屏幕上工作。但我不能让它正常工作。如果我最小化电脑上的屏幕，而不是在我检查手机时，课堂就会消失

我尝试过使用

display:none解决堆栈溢出的建议解决方案！重要的

覆盖info类中的

显示：block

，但这也不起作用。我还尝试过从info类中取出

display:block

，但没有成功。我想我不能取出

工具提示中的
显示：block
，因为这样会弄乱布局

HTML:

您需要在主html文件的头部包含视口元标记。看起来像这样

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />



请注意，您可以自定义此标签中显示的一些选项。
这可能不起作用的原因有很多-例如，您是否包括了viewport meta标签？您知道手机的分辨率吗？它们可能是令人惊讶的largeNo，我认为我没有包含视口元标记。我只有我手机的分辨率是1136 x 640像素。但是max-width:768px在过去很管用，在这个jsFiddle>Wow中很管用！太棒了，非常感谢你的帮助！
 .info {
     display: block;
     position: absolute;
     top: 18px;
     right: 30px;
     text-align: right;
     margin: 0;
     padding: 0;
     cursor: pointer;
     text-decoration: none;
     white-space:pre-wrap;
 }

 .tooltip {
    display: block;
    position: relative;
    left: 0;
    bottom: 120%;
    width: auto;
    padding: 10px;
    background-color: #00DCFF;
    color: White;
    line-height: normal;
    text-transform: none;
    font-size: 16px;
    opacity: 0;
    transform: scaleY(0);
    transition: all 0.2s ease;
    white-space:pre-wrap;
        }

.info:hover .tooltip {
    opacity: 1;
    transform: scaleY(1);
        }

@media screen and (max-width: 768px) {
  .info {
    display: none!important;
    }
  }

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />