How To Remove a Slider from Responsive Design

Question

I'm a small business owner that has (up until now) managed a successful website.

However, with the pending Google Mobilegeddon, my website for some reason does not pass the Google Mobile Friendly test (https://www.google.com/webmasters/tools/mobile-friendly/). I believe this is due to the slider as when I disable the slider plugin and remove it. The website passes it.

The website is built in WordPress using Catalyst/Dynamik as the child theme. The plugin I use for the slider is Soliloquy. I have tried so many different sliders that at this point I would like to just take out the slider for the responsive/mobile version only.

I have this as the code in the responsive panel:

#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;}

I think it has something to do with the last line.

Can I please request any assistance to help remove the slider from the mobile/responsive version.

Your help is greatly appreciated. :)

Answer 1

What mobile size would you want to remove the slider on? Generally laptops: 1280px tablet landscape: 1024px, tablet portrait: 768px, mobile landscape: 480px, mobile portrait: 320px

I'll just assume a display below 480px would remove the slider so add this to your css:

@media only screen and (max-width: 480px) {
    .slider-wrapper, #soliloquy {display:none;}
}