media query works on browser resize but not on mobile device

Question

The purpose of this is to hide a video and replace it with a background image on mobile devices.

I've seen many questions about the same topic. A lot of them say, add

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

and everything seems to work out fine.

I have that already. My css is:

@media screen and (max-width:999px) {
    .et_pb_section_video_bg {
        background-image:url("/wp-content/uploads/2017/02/Old-Instrument-Broken-Abandoned-Wrecked-Piano-Dark.jpg");
        background-size: cover;
    }
    #mep_0 { display: none; }
}

On a desktop, I can narrow the window and I see the background image that I specified in my css. On a phone or tablet, there is nothing.

Here it is in action: UPDATE: REMOVED URL

Any ideas why this won't work on mobile devices?

score 0 · Accepted Answer · edited May 23 '17 at 12:17

0

Add this to the bottom of your stylesheet. It will make it work.

HOWEVER there is a small problem of showing video on mobile devices. Videos don't autorun so your video won't play on mobile devices automatically.

More here: Youtube embedded video: autoplay feature not working in iphone

@media screen and (max-width: 999px){
#mep_0 {
    display: block;
  }
}

So I recommend showing backgorund Image instead of video on mobile devices.

UPDATE In your case, the video section wont' even load on mobile devices that's why the background image is not showing. You need to add this with your image. Also get rid of the old css you added :)

@media screen and (max-width: 999px){
#homevid {
    background-image: url(https://fandf-si7mj9eju7kjbgtgaeu.netdna-ssl.com/wp-content/uploads/2017/02/Old-Instrument-Broken-Abandoned-Wrecked-Piano-Dark.jpg);
    background-size: cover;
}
}

edited May 23 '17 at 12:17

Community

1
1

answered Mar 09 '17 at 04:55

Aslam

9,204
4
35
51

That didn't do it. I've left it at the bottom of my style sheet regardless. The purpose is to do just as you suggested. To hide the video and show the background image instead. It works with desktop window resizing. But it just doesn't do it on mobile. – osakagreg Mar 09 '17 at 05:06
Thank you! What do you use to inspect elements on a mobile device? I would have never known that the selector was removed. – osakagreg Mar 09 '17 at 05:30
1

I simply used the mobile icon (top left ) on chrome desktop browser console, Ctrl + Shift + M. And then refreshed the page. – Aslam Mar 09 '17 at 05:32

media query works on browser resize but not on mobile device

1 Answers1