删除手机和平板电脑上的 div答案

【问题标题】：remove div's on mobile and tablet删除手机和平板电脑上的 div
【发布时间】：2022-01-26 07:43:42
【问题描述】：

https://staging-digemaya.kinsta.cloud/membership/

我已经删除了 div 的 using

    .page-id-16713 .cta-2-banner-2 {
            display: none
        }
        
        .page-id-16713 .quotes-wrapper {
            display: none
        }

但是，它们仍会显示在平板电脑和移动设备上。我到处搜索，没有任何工作。

【问题讨论】：

标签： css wordpress mobile display

【解决方案1】：

我在您的网站上使用了检查器工具，似乎有一个媒体查询应用于这些样式。尝试移动

    .page-id-16713 .cta-2-banner-2 {
            display: none
        }
        
        .page-id-16713 .quotes-wrapper {
            display: none
        }

到样式表的顶部而不是底部，看看这是否能解决问题。

为了将来参考，您应该尝试将 @media 查询保留在 CSS 的底部。你可以阅读更多关于这个here

【讨论】：

【解决方案2】：

在快速浏览您网站的 html 时，您共享的 css 似乎不在媒体查询中，但是浏览器检查器工具显示它在媒体查询中 (2x)：

@media screen and (min-width: 768px)
@media screen and (min-width: 768px)
      .page-id-16713 .cta-2-banner-2 {
           display: none;
      }

这意味着在此属性之前的某处可能存在无效的 css 导致问题。浏览器试图理解这些东西，这就是它在媒体查询中的原因。我推荐一个 w3c 验证器或将你所有的 css 放入你的代码编辑器并进行梳理。

最快的修复（虽然不是推荐的原因，真正无效的问题应该解决以防止将来出现问题）：

@media only screen and (max-width: 40em) {
    .page-id-16713 .cta-2-banner-2,
    .page-id-16713 .quotes-wrapper {
        display: none
    }
}

【讨论】：