How to create a full screen mobile header image

  • Resolved helenasimon

    (@helenasimon)


    5 years, 5 months ago

    My header image is full screen on a desktop but not on mobile. I’d like it to be full screen on all devices. How can I fix this?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Yeah, looking for that too. A full-screen hero section that adjusts to the device.

    How come such a simple thing is so complicated to obtain? I’m mesmerized.

    Theme Author Dinev Dmitry

    (@dimadinev)

    Hi @helenasimon

    You can fix this by adding lines:
    (WP Dashboard > Appearance > Customize > Additional CSS)
    (You can change the numerical values to your own)

    /* front-page, homepage */
    @media screen and (max-width: 740px){
    .home.page .head-content {
    padding-bottom: 60%;
    padding-top: 100% !important;
    }
    }

    /*archives page*/
    @media screen and (max-width: 740px){
    .no-thumbnail .head-content, .archive .head-content, .search .head-content {
    padding-top: 80% !important;
    }
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to create a full screen mobile header image’ is closed to new replies.