Changing the height of the featured image- Venture theme

  • Unknown's avatar
    ananda111 · Member ·

    I am building a website on the Venture theme.
    I wanted to change the height of the featured image on the home page.
    On this forum, I found the following CSS rules that worked well:

    #fullscreen-header, #fullscreen-header .featured-slide {
    height: 75vh !important;
    }

    #fullscreen-header .featured-slide {
    background-size: auto 75%;
    }

    #fullscreen-header {
    min-height: 300px !important;
    }

    The image height changed the way I wanted.

    Yet, while the homepage looks fine on Desktop and Tablet view, when I look at mobile view , the space below the featured image and the page content is huge. It looks like the header image container has not changed for the mobile view.

    Is there a way to fix this?

    This site is not yet published

    THANK YOU

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi @ananda111, if that’s messing up the mobile display, probably the simplest fix is to apply those changes only on larger screens:

    @media (min-width:500px) { 
#fullscreen-header, #fullscreen-header .featured-slide {
height: 75vh !important;
}

#fullscreen-header .featured-slide {
background-size: auto 75%;
}

#fullscreen-header {
min-height: 300px !important;
 }
}

    Hoping it helps!

  • Unknown's avatar
    ananda111 · Member ·

    That worked!
    Thank you so much.
    Much appreciated.

  • supernovia · Staff ·

    You bet. Cheers!

  • The topic ‘Changing the height of the featured image- Venture theme’ is closed to new replies.