Title: Adaptation for mobile
Last modified: August 31, 2016
---
# Adaptation for mobile
* Resolved [savohij](https://wordpress.org/support/users/savohij/)
* (@savohij)
* [10 years, 1 month ago](https://wordpress.org/support/topic/adaptation-for-mobile/)
* Hi there!
First of all, I really like this slider a lot! It’s free and has all
the cool stuff available to use. But I have a problem with it while trying to
adopt my web-site(and the slider) for a mobile-friendly version. You see, the
mobile version MUST be light-wight(less mb – faster load), so I disable big images(
background-images) with display:none with my [@media](https://wordpress.org/support/users/media/)
queries, so it will be as light as possible. However, even tho the images of
the CrellySlider are background-images(means I can display:none on them) I cant
disable them. They are loaded each time. The thing is, the slider change the
DOM, so when [@media](https://wordpress.org/support/users/media/) queries try
to “display:none” on them, they changed back with JS.
* Is there anyway I can make this more mobile-friendly, so the images of the slider(
and the layers of each one of them) will not load for mobile versions?
* I’m not a big expert(he-he), I don’t know JS, but perhaps this rule(of code)
would help to solve the problem:
if (document.documentElement.clientWidth <
600) { // disable all the scripts related to the slider on the loading, so it
won’t load unnecessary images of the slider, will disable the layers of the slider
and DOM changing } elseif (document.documentElement.clientWidth < 900) { // disable
all the scripts(as before), but load another slider(created special for this)
without layers and with different images(of course) } if (document.documentElement.
clientWidth > 900) { // use normal slider }
* Thanks in advance!
* [https://wordpress.org/plugins/crelly-slider/](https://wordpress.org/plugins/crelly-slider/)
Viewing 10 replies - 1 through 10 (of 10 total)
* Plugin Author [Fabio Rinaldi](https://wordpress.org/support/users/fabiorino/)
* (@fabiorino)
* [10 years, 1 month ago](https://wordpress.org/support/topic/adaptation-for-mobile/#post-7241184)
* Before trying a JavaScript solution, did you try to use the !important attribute
in css? Like display: none !important;
* Thread Starter [savohij](https://wordpress.org/support/users/savohij/)
* (@savohij)
* [10 years, 1 month ago](https://wordpress.org/support/topic/adaptation-for-mobile/#post-7241194)
* Yes, fabiorino. Tried that too.
The thing is, the slider is using the inner
styles(style=”…”) inside of it, and also change it every time in the DOM it self.
So nothing helps(as I tried) from the external css file(styles.css).
* Plugin Author [Fabio Rinaldi](https://wordpress.org/support/users/fabiorino/)
* (@fabiorino)
* [10 years, 1 month ago](https://wordpress.org/support/topic/adaptation-for-mobile/#post-7241244)
* The !important tag should be “stronger” that the inline tag. Please, if you can,
send me a screenshot of the piace of code that you tried (fabiorino@outlook.com).
Also, if your website is online, send me the link.
* Thread Starter [savohij](https://wordpress.org/support/users/savohij/)
* (@savohij)
* [10 years, 1 month ago](https://wordpress.org/support/topic/adaptation-for-mobile/#post-7241254)
* I did lots of things in order to try, but as for about the `display: none !important;`
I did and try this:
* [ the screen shot!](http://s24.postimg.org/hs1m57k03/The_Screen_Shot.png)
* I put the slider into the container(id – `#container`) – it’s not shown on the
screenshot;
The id of the slider is – `#crellyslider-2`; Now, in my css I did
this:
* ```
@media (max-width:600px){
#container, #crellyslider-2, #crellyslider-2 ul li {
display: none !important;
}
}
```
* And that didn’t work, unfortunately.
* P.S. the site isn’t on the air yet
* Plugin Author [Fabio Rinaldi](https://wordpress.org/support/users/fabiorino/)
* (@fabiorino)
* [10 years, 1 month ago](https://wordpress.org/support/topic/adaptation-for-mobile/#post-7241287)
* I tried this successfully on my test website:
* ```
[crellyslider alias="test"]
```
* Here is the screen: [http://i.imgur.com/6GxRQHN.jpg](http://i.imgur.com/6GxRQHN.jpg)
* Thread Starter [savohij](https://wordpress.org/support/users/savohij/)
* (@savohij)
* [10 years, 1 month ago](https://wordpress.org/support/topic/adaptation-for-mobile/#post-7241288)
* I see… That’s not what I meant 🙂
I know the container can get the `display:
none` without any problem. The problem however is not this. The problem is, if
the container gets the `display: none`, the images of the slider still downloaded,
and whole of this `display:none` thing is made to stop them from download, because
this images impact the weight of the mobile-site version.
* So… What is needed to be done is, to disable somehow the images of the slider,
layers it contains and DOM from automatic changes(no need for this if there’s
no slider, but I’m not sure how seriously this if we talking about the speed
of the page).
* Plugin Author [Fabio Rinaldi](https://wordpress.org/support/users/fabiorino/)
* (@fabiorino)
* [10 years, 1 month ago](https://wordpress.org/support/topic/adaptation-for-mobile/#post-7241290)
* Ok ok, I get it. Sincerely I’m not sure if Javascript is the right solution because
I don’t know if that will prevent the content to download or will just hide it(
like display: none; does)
* Anyway, you could try this one:
* ```
[crellyslider alias="desktop_version"]
[crellyslider alias="mobile_version"]
```
* I’ve never tried to do a speed test for this solution, you have to tell me if
it works.
If it doesn’t, the only other remaining solution is working on the
server side with php (it’s more difficult but that should work)
* Thread Starter [savohij](https://wordpress.org/support/users/savohij/)
* (@savohij)
* [10 years, 1 month ago](https://wordpress.org/support/topic/adaptation-for-mobile/#post-7241297)
* I actually tried this my self, but with a little bit more of code(with connection
to css `display:none` of the element and eventListener on the resize). But there’s
two problems with this:
1) (the main problem) – It still load the images… I
think this is happens because JS loaded a little bit after, but I’m not sure.
Anyway, this isn’t working. 2) I don’t know how to resize back with the slider
on(something like: `jQuery('.crellyslider-slider-desktop_version').undoTheRemove();`).
Silly, I know 🙂 But this would finish the job, I think.
* Thread Starter [savohij](https://wordpress.org/support/users/savohij/)
* (@savohij)
* [10 years, 1 month ago](https://wordpress.org/support/topic/adaptation-for-mobile/#post-7241300)
* I was wrong! This method is working! If the JS loading normally it would work…
well… normally too 🙂
So, the performance issue is solved! This was THE problem.
Thanks a-lot, fabiorino, for your invaluable help and support! 🙂
* Plugin Author [Fabio Rinaldi](https://wordpress.org/support/users/fabiorino/)
* (@fabiorino)
* [10 years, 1 month ago](https://wordpress.org/support/topic/adaptation-for-mobile/#post-7241335)
* You’re welcome!
Viewing 10 replies - 1 through 10 (of 10 total)
The topic ‘Adaptation for mobile’ is closed to new replies.
* 
* [Crelly Slider](https://wordpress.org/plugins/crelly-slider/)
* [Support Threads](https://wordpress.org/support/plugin/crelly-slider/)
* [Active Topics](https://wordpress.org/support/plugin/crelly-slider/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/crelly-slider/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/crelly-slider/reviews/)
* 10 replies
* 2 participants
* Last reply from: [Fabio Rinaldi](https://wordpress.org/support/users/fabiorino/)
* Last activity: [10 years, 1 month ago](https://wordpress.org/support/topic/adaptation-for-mobile/#post-7241335)
* Status: resolved