CSS or Javascript for Show / Hide

I have a page that has a full-width layerslider that looks good in some screen sizes and not in others.

Have found that on mobile screens the layerslider is VERY tiny and (at least) on Iphone the size cannot be increased by gestures (using fingers to make wider).

So, my solution was:
Use the layerslider on appropriate screen sizes.
But use a two-column code for the smaller screen sizes.

1. First, I tried CSS to show/hide.

Worked for the two-column code — but the CSS for the Layerslider only worked in Firebug…or if in Quick CSS.

Quick CSS would be okay, but when I try to select layerslider on particular page, per below…it just doesn’t do anything.

#top .page-id-3772 #layer_slider_1{display:none!important;}

2. Then, I reconsidered…

Maybe it’s NOT smart o load BOTH layerslider and two-column code if ONLY using one. Is this accurate?

Is it poor to load BOTH elements even when you’re only showing one?

I can do an if-then shortcode bit in functions.php, but don’t know how to assess screen size via PHP.

3. Is there a function in Enfold that already does this?

Don’t want to re-include some function you may already include. Otherwise, thought this looked potentially interesting.
https://github.com/serbanghita/Mobile-Detect

Realize it would be EASIER to include both elements in Page because then editing is easier.
Removing in text form to shortcode is less “visual”.

Suggestions?

Thanks for any thoughts. Figure this is an issue I will be running into over and over again.

• This topic was modified 9 years, 2 months ago by CharlieTh.