将文本隐藏在移动设备上并隐藏在移动设备上方

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 px以上的任何内容中隐藏某些内容，是否有人知道媒体查询的最佳方式。

你刚刚放了100000000或类似的所以它从未显示过吗？

Answer 1

在您的网站上，您有一个名为＆＃39; dontdisplayonmobie＆＃39;当视口小于401像素时正确隐藏。但是您的span类位于段落（my_button）中。 P有一个填充底部：1em;这是你仍然看到的空白空间。

，当视口小于401像素时，删除该段落的填充底部。

Answer 2

你只需要像这样的HTML

<span class="dontdisplayonmobile">Free Quotes. </span><span class="calltodayword">Call today.</span> <a href="tel:01216631202"><i class="fa fa-phone icon-phone"></i> 0121-663-1202</a>

@media only screen and ( max-width: 401px ) {
  .dontdisplayonmobile    {
    display: none;
  }
}

所以你只是隐藏了“Free Quotes”

的部分