Search code examples
jquerysupersized

Hiding jQuery Supersized gallery in a responsive design?


I'm using the Supersized jQuery plugin and am trying to 'disable' or hide the fullscreen images when the screensize is smaller than 480px i.e. around the iPhone size. However, I can't see a way to do it - I've tried with CSS without success (trying to hide the #supersized ul list), but I can't get it to work as the style is inline.

I've copy-pasted the HTML generated by Supersized for the first list item used in the gallery so you can see what I have to work with - might there be a callback I could use or something?

<ul id="supersized" class="quality" style="visibility: visible;">
   <li class="slide-0 prevslide" style="visibility: visible; opacity: 1;"><a target="_blank"><img src="#" style="width: 1425px; left: 0px; top: -190.5px; height: 869.25px;"></a></li>
...
</ul>

Any pointers appreciated.

Thanks,

Osu


Solution

  • I needed to add !important to my class declarations in order for it to work i.e.

    #supersized { display:none !important; left:-999999px !important; }