jquery - 如何从响应式设计中删除 slider

Question

我是一名小企业主，(到目前为止)管理着一个成功的网站。

但是，由于未决的 Google Mobilegeddon，我的网站出于某种原因没有通过 Google Mobile Friendly 测试 (https://www.google.com/webmasters/tools/mobile-friendly/)。我相信这是由于 slider 的原因，因为当我禁用 slider 插件并将其删除时。网站通过它。

该网站是使用 Catalyst/Dynamik 作为子主题在 WordPress 中构建的。我用于 slider 的插件是 Soliloquy。我已经尝试了很多不同的 slider ，在这一点上我只想取出响应/移动版本的 slider 。

我将此作为响应面板中的代码:

#header-wrap {background:none !important;}
.logo-image #header-wrap #header {width:100%;text-align:center;}
.logo-image #header #header-left {width:200px;background:url('images/air-conditioning-brisbane.png') no-repeat scroll center top transparent;margin:0 auto !important;}
.logo-image #header-left, .logo-image #header-left #title, .logo-image #header-left #title a {width:200px;}
#callus {margin-top:5px;margin-bottom:5px;}
.slider-wrapper, #soliloquy {display:none;}

我认为它与最后一行有关。

我可以请求任何帮助以帮助从移动/响应版本中删除 slider 吗？

非常感谢您的帮助。 :)

Answer 1

此处有些内容与上下文无关，但如果您有权编辑 CSS，那么这应该不是问题。我也不确定您的技能水平，因此我假设您的编码经验几乎为零。

首先您需要找到元素的选择器。您可以使用 Chrome 或 Firefox 并右键单击 slider 并使用检查元素来执行此操作。找到根元素并记下它的选择器。查看“class”和“id”属性是否存在。最好抓取id。 CSS 文件应该如下所示:

/* up to wide mobile */
@media screen and (max-width: 768px) {
    /* using the ID of the element */
    #my-slider {
        display: none;
    }

    /* using the class of the element */
    .my-slider {
        display: none;
    }
}

如果它在移动设备上仍未隐藏，则可能是因为优先级，您可以通过向 CSS 选择器添加更多父级和/或添加 !important 标志来提高优先级。

body .my-slider {
    display: none !important;
}

如果您使用的是 Jetpack 插件，您还可以将样式粘贴到自定义 CSS 样式表中，或者也可以将样式粘贴到/wp-content/themes/catalyst-theme/style 中的 style.css 文件中。 CSS。