Video header media not showing on mobile

Hi, I am not seeing the header media on a mobile device. I have a video now, and I’ve also tried adding the photo header image and I’m not having much luck. Am I doing something wrong? Thanks https://drpatriciarice.com/draft/

Hello,

Can you please specify affected mobile device and browser version?

Kind Regards, Roman.

Hi, using an iPhone. Thanks

Hello, sorry for delay.

I asked our Developer to check this issue, let’s see what he says.

Kind Regards, Roman.

Thank you great! I’ll wait to hear more. Best

Hi,

The default WordPress video header option (which is what we’re using in Ignis) does not work by default on mobiles. The header image however (as seen on our demo site) works fine.

How about we help you with a bit of custom CSS to display an image on mobiles and you keep the video on large screens.

Vlad

Thanks, yes, I think that will be fine. Looking forward to the CSS

Hi,

I’m going to need a link to the image you want to display please.

Vlad

Thanks, I’ve added an image here: https://drpatriciarice.com/draft/wp-content/uploads/2018/08/cloud-scape.jpg

Please add this in Customize > Additional CSS:

@media ( max-width: 600px ) {
       .ignis-hero-area.has-media {
            background-image: url(https://drpatriciarice.com/draft/wp-content/uploads/2018/08/cloud-scape.jpg);
            background-size: cover;
            background-attachment: scroll;
            padding: 150px 0;
       }
}

Also make sure to resize the image please because now it’s larger than it needs to be. Maybe make it like 600-700 pixels in width. And if you have a new link when you re-upload, you can just replace in the code above.

Vlad

1 Like

Perfect! This works great! I have uploaded a reduced size image and it shows up right away on mobile and looks great. Thanks for your help! Best