Mobile theme help

Resolved ps1
(@ps1)

11 years, 9 months ago
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.
```
<?php if ( is_front_page() ) {
if ( function_exists( ‘easing_slider’ ) ) { easing_slider(); }
}?>
```
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 →

janet4now
(@janet4now)

11 years, 9 months ago

I usually use @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
(@craig-ralston)

11 years, 9 months ago

Without seeing the markup it is tough to tell. You may just not be targeting it properly in your CSS.

Thread Starter ps1
(@ps1)

11 years, 9 months ago

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
(@ps1)

11 years, 9 months ago

Thanks Craig I will try to clone it to my webserver so you can see

Craig Ralston
(@craig-ralston)

11 years, 9 months ago

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
(@janet4now)

11 years, 9 months ago

how are you testing it on different devices without it being online?

Thread Starter ps1
(@ps1)

11 years, 9 months ago

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
(@ps1)

11 years, 9 months ago

OK, after bugging someone I got it uploaded to a web server

http://icbweb.com/test/

Have the @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
(@craig-ralston)

11 years, 9 months ago
Use this CSS in your media query:
```
.easingsliderlite {
display:none;
}
```
Thread Starter ps1
(@ps1)

11 years, 9 months ago
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
(@craig-ralston)

11 years, 9 months ago

Yes.
Thread Starter ps1
(@ps1)

11 years, 9 months ago
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
(@janet4now)

11 years, 9 months ago
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.ww.wp.xz.cn/Child_Themes

For the @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
(@marcosdice)

11 years, 9 months ago

Dam,

really usefull, i was hardly trying on my parallax theme

now it works!

thanks folks 🙂

Thread Starter ps1
(@ps1)

11 years, 9 months ago

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 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