Title: Mobile theme help Last modified: August 22, 2016 --- # Mobile theme help * Resolved [ps1](https://wordpress.org/support/users/ps1/) * (@ps1) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/) * Hi, * Running WP on local PC network and just want some help with coding for when the site is displayed on mobile devices. * Running responsive theme and have the site looking good when displayed on a desktop/ laptop. The site also looks good on mobile devices with a couple of exceptions. * I am running Easing slider full width. I have it set up so the slider only appears on the home page by using this code into a header.php file I have created in my child theme. * ``` ``` * And it works brilliantly. However the slider is not really suitable for mobile devices e.g smartphones but looks OK on Android tablet/ipad. I have tried the following. * ``` @media screen and (max-width: 650px) { #easing_slider { display:none; } ``` * For 650, 480, 320 & 240 screens in both the rtl.css and style.css in my child theme. But alas the slider still displays. Is there a way to stop the slider displaying on these screen sizes? Don’t know if I am doing something basically wrong? Is there even another or better way to approach this? * After this is resolved I need to do the same with the background image * Many thanks for any help * P Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/mobile-theme-help/page/2/?output_format=md) [→](https://wordpress.org/support/topic/mobile-theme-help/page/2/?output_format=md) * [janet4now](https://wordpress.org/support/users/janet4now/) * (@janet4now) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/#post-5195997) * I usually use [@media](https://wordpress.org/support/users/media/) all rather than screen… I really don’t know if that makes any difference… You can also try adding !important to your code. Sometimes those plugins are hard to override. * Do you have a link to your site? * [Craig Ralston](https://wordpress.org/support/users/craig-ralston/) * (@craig-ralston) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/#post-5195998) * Without seeing the markup it is tough to tell. You may just not be targeting it properly in your CSS. * Thread Starter [ps1](https://wordpress.org/support/users/ps1/) * (@ps1) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/#post-5195999) * Thanks for the reply. I will try that. The site is hosted on my local on PC on local network server. I don’t have DMZ setup on router for external access at this stage. * Thread Starter [ps1](https://wordpress.org/support/users/ps1/) * (@ps1) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/#post-5196000) * Thanks Craig I will try to clone it to my webserver so you can see * [Craig Ralston](https://wordpress.org/support/users/craig-ralston/) * (@craig-ralston) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/#post-5196001) * You could paste the HTML that `easing_slider()` is outputting. Depending on the version of Easing Slider you have, the HTML changes so I do not know if `#easing_slider` is the right target for your `display:none;` * You don’t need to set it up so I can see, you could just post the slider HTML. * [janet4now](https://wordpress.org/support/users/janet4now/) * (@janet4now) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/#post-5196002) * how are you testing it on different devices without it being online? * Thread Starter [ps1](https://wordpress.org/support/users/ps1/) * (@ps1) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/#post-5196010) * how are you testing it on different devices without it being online? * Through the LAN shared folders XAMMP etc. My friend setup a local installation for me. * Thread Starter [ps1](https://wordpress.org/support/users/ps1/) * (@ps1) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/#post-5196019) * OK, after bugging someone I got it uploaded to a web server * [http://icbweb.com/test/](http://icbweb.com/test/) * Have the [@media](https://wordpress.org/support/users/media/) code above in the rtl.css in the child theme * No content just basically the header, background and slider in. * Best viewed in Firefox. Have not fixed the Moz gradient thing for the navbar to change colour in IE * [Craig Ralston](https://wordpress.org/support/users/craig-ralston/) * (@craig-ralston) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/#post-5196021) * Use this CSS in your media query: * ``` .easingsliderlite { display:none; } ``` * Thread Starter [ps1](https://wordpress.org/support/users/ps1/) * (@ps1) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/#post-5196025) * Thanks Craig. Do you mean replace * ``` @media screen and (max-width: 650px) { #easing_slider { display:none; } With this in rtl.css in the child theme? ``` * ``` @media screen and (max-width: 650px) { .easingsliderlite { display:none; } ``` * [Craig Ralston](https://wordpress.org/support/users/craig-ralston/) * (@craig-ralston) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/#post-5196027) * Yes. * Thread Starter [ps1](https://wordpress.org/support/users/ps1/) * (@ps1) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/#post-5196032) * Thanks craig. I changed the rtl.css code to this but it stll shows * ``` /* Theme Name: responsive_child Template: Right to Left text support. */ @import url("../responsive/rtl.css"); @media screen and (max-width: 650px) { .easingsliderlite { display:none; } @media screen and (max-width: 480px) { .easingsliderlite { display:none; } @media screen and (max-width: 320px) { .easingsliderlite { display:none; } @media screen and (max-width: 240px) { .easingsliderlite { display:none; } ``` * [janet4now](https://wordpress.org/support/users/janet4now/) * (@janet4now) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/#post-5196074) * I don’t understand why you’re using the rtl.css? That is for right to left languages and in your case it isn’t loading in the browser. * Your child theme style.css is empty. That is where your modifications need to go. [http://codex.wordpress.org/Child_Themes](http://codex.wordpress.org/Child_Themes) * For the [@media](https://wordpress.org/support/users/media/) queries, you only need to use the 650px max width declaration. All the smaller sizes are unnecessary duplication. Everything from 650 and smaller will be effected. An extra bracket at the bottom closes the media query. Make sure to include that, too. * ``` @media all and (max-width: 650px) { .easingsliderlite { display:none; } } ``` * I think once you do that, your slider will disappear on the smaller screens. * Cute site, btw! * [Marcosdice](https://wordpress.org/support/users/marcosdice/) * (@marcosdice) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/#post-5196080) * Dam, * really usefull, i was hardly trying on my [parallax theme](http://marcosdice.es/freelance-seo) * now it works! * thanks folks 🙂 * Thread Starter [ps1](https://wordpress.org/support/users/ps1/) * (@ps1) * [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/#post-5196083) * Thank you janet4now. I tested it on my local LAN copy and it worked. The reason I was trying rtl.css was because there was [@media](https://wordpress.org/support/users/media/) code similar to what I was trying to change. Did try it style.css child theme but it did not work. Suppose I was missing the extra bracket. Dumb error I suppose. Just need to work out how to do the same with background. * Thank You Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/mobile-theme-help/page/2/?output_format=md) [→](https://wordpress.org/support/topic/mobile-theme-help/page/2/?output_format=md) The topic ‘Mobile theme help’ is closed to new replies. * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 16 replies * 4 participants * Last reply from: [ps1](https://wordpress.org/support/users/ps1/) * Last activity: [11 years, 9 months ago](https://wordpress.org/support/topic/mobile-theme-help/page/2/#post-5196125) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics