Okay
  Public Ticket #2712449
header image size on mobile
Closed

Comments

  •  2
    Stan started the conversation
    March 7, 2021 at 9:01am

    Hi there, 

    I want the header image to display in a different size on mobile.
    As it is now is how it should work on desktop version, but  I want to have a bigger height on the mobile version.

  •  2,962
    Andrew replied
    March 7, 2021 at 4:14pm

    Hi Stan,

    Thank you for contacting us.

    Please try this css:

    @media only screen and (max-width: 999px){
    #page-header-bg[data-parallax="1"] .page-header-bg-image {
        height: -webkit-fill-available;
        background-size: inherit;
    }
}

    Thanks.

  •  2
    Stan replied
    March 7, 2021 at 4:18pm

    Hi Andrew ,this didi change the size of the image in the header, but not the size of the header. 
    Right now header is landscape in both desktop and mobile. I'd like to have more of a square size in the mobile. Is this possible?

  •  2,962
    Andrew replied
    March 7, 2021 at 6:22pm

    Hi Stan,

    How about you tried this css:

    @media only screen and (max-width: 999px) and (min-width: 1px){
    #top, #page-header-wrap, #header-outer:not([data-permanent-transparent="1"]), body:not(.single-post) #page-header-bg:not(.fullscreen-header), body:not(.single-post) #page-header-bg[data-alignment-v="bottom"]:not(.fullscreen-header), body:not(.single-post) #page-header-bg[data-alignment-v="top"]:not(.fullscreen-header), .full-page-inner-wrap[data-content-pos="full_height"] .full-page-inner > .span_12, .vc_text_separator {
        min-height: 0;
    }
}

    Thanks.

  •  2
    Stan replied
    March 7, 2021 at 7:18pm

    That worked Andrew, thanks. 
    I had to use that CSS inside the individual pages because if I use it in the Master CSS it messes with the mobile menu too.