Hi,

On a new site under construction the client is concerned that a good portion of his demographic are on slower 3G type mobile devices, as such I thought I would ask if it were at all possible  within this theme with some coding and CSS to load an alternate version of either a nectar or revolution slider on the home page with smaller simpler imagery to load faster. Something like this to start: @media only screen and (max-device-width: 480px)

Hey Tahir,

Actually I decided while I'm at it to do the same thing on the other client I have licensed with Salient where I am using the Nectar slider only. If you have a sec for some advice this is what I was thinking when I worked on the first site with the Revolution slider option.

On page:

<div id="mobileversionhome">
[rev_slider mobilehome]
</div>

<div id="ScreenVersion">
[rev_slider_vc alias="home-page"]
</div>

CSS:

#mobileversionhome {display:none; margin:0, padding:0}
/*layouts smaller than 600px, iPhone and mobiles*/

@media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) {
#mobileversionhome {display:block !important;}

That works fine and the smaller mobile version loads on a mobile device and the more ram intensive full sized version does not. However, if you make the browser window very narrow on a desktop screen both of them show, so I've been fiddling with CSS for #ScreenVersion, so far with no luck using min-width.

So my question there is any advice for that, and will this same approach work with the nectar slider short code? I'll keep tinkering on my end but any quick advice you have would be a Godsend.

Thanks,

Tony