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

Home Forums Support How to reduce the page header video size for mobile phone

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #348270
    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

    GeneratePress 1.3.48
    #348321
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

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

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

    #348334
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.