css - 在移动设备上隐藏文本并隐藏在移动设备上方的尺寸上

Question

我用下面的代码隐藏了一些文本

/* Smartphones in portrait mode (0-401px) */
@media only screen and ( max-width: 401px ) {
    .dontdisplayonmobile    {
    display: none !important;
}
}

它停止在移动设备上显示。但是它创建的间距仍然存在，所以它使文本可以移动但不会完全移动，就好像那里什么都没有一样。

我试过添加 ，但是没用

margin: 0 !important;
padding: 0 !important;  

有什么想法吗？

编辑

例如，当您想在 401 像素以上的任何内容上隐藏某些内容时，有没有人知道媒体查询的最佳方式。

您是否只输入 100000000 或类似的值以使其永远不会显示？

Answer 1

在您的站点上，您有一个名为“dontdisplayonmobie”的跨度类，当视口(viewport)小于 401 像素时它会正确隐藏。但是你的 span 类在一个段落中( <p> </p> )。 P 有一个 padding-bottom: 1em;这是你仍然看到的空白空间。当视口(viewport)小于 401 像素时移除该段落的填充底部，它应该看起来不错。