Disable video header in mobile view

So as the topic title explains, basically what I want to do is when I enter my site on mobile view @media only screen and (max-width: 500px) I want the video header gone.

is there any way to do this?

best regard

Hello Brassoe,

Can you please provide a link to your website?

Kind Regards, Roman.

Sure thing


When im on a computer i want the videoheader to be visible, but when on screen < 500px i want the video gone

Do you think that is possible with some kind of custom css? Or should we be testing with JS?

Hello Brassoe, thank you for the link. Please try to use the following CSS code in order to hide (not remove) the header video when the width is 500px or less.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

@media only screen and (max-width: 500px) {
    .sydney-hero-area {
        display: none;

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Roman you’re an absolute legend!!

I wasn’t sure how to target the header, i’m sure i could’ve looked more deep into it however thanks you very much !!

You are welcome Brassoe! :slight_smile:

Kind Regards, Roman.