[Resolved] How to reduce the page header video size for mobile phone

[Nathalie]

Hi,

I am having difficulties to reduce the size of the div container for the .page-header-video on the mobile phone version.

I have understood that I cannot have the video showing on the mobile version and instead adding an image which I’ve done. My problem is the height is too big so I’ve tried to reduce it without success.

This is what I have tried but it wouldn’t work.

I have added on simple css plugin the following code,

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
div > .generate-page-header-video{
height:300px;
}
/*–or this code
div > .page-header-content {
height:300px;
}
–*/
}

However nothing seems to work. There is a big empty space after the background image that I want to get rid of. Here the url to be checked on mobile phone
http://www.crystalfilm.org/

Thank you in advance

Nathalie

[Tom]

Give this a shot:

@media (max-width: 768px) {
    .generate-combined-page-header {
        height: 300px !important;
    }
}

[Nathalie]

Great Tom! Thanks a lot it did help but with max-width:480 px.

[Tom]

Awesome 🙂

[Author]

Posts