How To Remove a Slider from Responsive Design

Hi there,

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.

 

You need to invoke the code with media queries something like this:
@media (min-width:768px){.slider-wrapper,#soliloquy {display:none;}}

 

Generally speaking to build a proper responsive site that is mobile friendly there are a whole host of stepping stones you should have along the way that most off the shelf templates made before responsive even existed are going to lack; as well as things that have no damned business on a website like fixed width elements. (like most slideshows)

It gets worse when garbage like turdpress is involved much less off the shelf frameworks sleazed together by people who likely had no business making front end code in the first place -- like the people at

There are telltales in the little bit of code you showed -- fixed pixel widths, pixel margins -- and looking up the discontinued template you mentioned and looking at it's replacement, you likely lack semantic markup, proper separation of presentation from content, and your markup has likely been pissed all over with endless pointless classes for nothing.

It gets worse in that if your site has been successful, you have likely been coasting entirely on the quality of your content and hobbling yourself through an utter and complete lack of accessibility. All those things "wrong" with turdpress and the scam artist off the shelf template garbage have likely been limiting your maximum potential audience, which is why generally speaking you would likely be better off throwing whatever it is you have away and starting over from scratch, than trying to use the duck-tape, chewing gum and bailing-wire approach to drag it kicking and screaming out of the late 1990's. That might sound harsh, and be a lot of work, but it's better to do it right than to hope that some silver-bullet will magically make rubbish code suddenly acceptable.

... and of course Google's mobile evaluation tool is ridiculously forgiving, and there are likely dozens if not hundreds of other factors that will ALSO negatively impact your rankings, conversion and retention. Off the shelf templates in general suffer badly from this and again if you've had success using them, it's either been blind luck, not realizing you're not meeting your full potential, or your content is of sufficient quality that users are putting up with annoyances that they can't be bothered to take the time to mention; or simply end up bouncing to find some other site with the same or similar content.

Though like every other Google Algo update, if you or the people coding your site have been paying ANY attention the past fifteen years following all the good practices that have been advocated like semantic markup (aka the sick euphemism for "using HTML properly"), separation of presentation from content, progressive enhancement, media targets, and accessible design -- well, an update like this should be a non-issue. On the flip side of that coin if you've been listening to SEO scam artists, slapping together off the shelf parts made by people not qualified to be coding jack **** and duped into believing their "form over function" mentality with "gee ain't it neat" scripttardery and pointless bandwidth wasting artsy fartsy BS -- well, just watch all the people who run around like chickens with their heads cut off when their latest scam or bad practices are slapped down HARD every time Google makes a change to how ranking works.

Like every update in the past, this one is just another case of "where have you been the past DECADE or more?" -- said question being either directed at you, or directed at the people who preyed upon your ignorance to dupe you into using their rubbish outdated 1990's style code.

SEEING the site in question might help me dial in or outline your potential pitfalls better... or at least give us more to help neuter that slideshow if all you want to do is hide it since CSS without the markup it's applied to is pretty much gibberish. Of course being "gee ain't it neat" scripttardery in the form of a "slider" means one would probably have to look at it with a document inspector given what utter and complete rubbish the markup for those typically are due to most of the people writing scripting not knowing enough about accessibility, HTML or CSS to be doing jack **** in JavaScript.