Video header off on mobile

Dear Roman,

I have an videoheader on link and I want it off on mobile and get a foto instead. I tried some my self but it didn’t work. could you please help?

Kind Regards,

Kevin

Dear Roman,

I’m tying to learn css, this is what I created:

.wp-custom-header video {max-width: 991px }  .wp-custom-header video { visibility: hidden;} .wp-custom-header video {
    background-image: url('https://www.naturotheek-luzerne.be/wp-content/uploads/2019/08/tijdelijke-banner-luzerne-min.jpg') !important;
}

I didn’t get the max width working…

Kind Regards,

Kevin

Hello Kevin,

Please note that you can’t remove video with CSS, only hide. So it will still be loaded on mobile devices, but not shown. So you can try to use the following CSS code to hide it (not remove). You can add CSS code in Customize → Additional CSS section.

@media (max-width: 1024px) {
    #wp-custom-header {
        visibility: hidden;
    }

    .sydney-hero-area {
        background-image: url('https://www.naturotheek-luzerne.be/wp-content/uploads/2019/06/naturotheek_luzerne_buiten.jpg');
        background-size: cover; 
    }
}

By the way, you might want to check this page:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Kind Regards, Roman.
aThemes Support

1 Like

Dear Roman,

Thank you for all the help and effort.
You are the best!:+1:

Kind Regards,

Kevin

You are welcome Kevin!

And thank you as well :slight_smile:

Kind Regards, Roman.
aThemes Support