Shorten header image on static front page

  • Author
    Posts
  • #115298

    wroostma
    Member

    My header image on my home page (of the bird house) is very large and I’d like to shorten in. My site is wroostmarketing.com. That first image is loaded via a blog post, as recommended.

    This other Purpose site has a shorter image somehow on this page: https://forgoodgroup.com/what-we-do/micro-finance/
    What CSS can I use to shorten my initial image?
    Thank you!

    The blog I need help with is wroostmarketing.com.

    #115482

    rezzap
    Staff

    Hello!

    The home slider displays at full height of the page as opposed to the header image which you see displayed on the single page in the example site you reference. The following CSS however will allow you to make sure the slider image doesn’t display as high as shown:

    .flexslider {
        max-height: 60vh;
    }

    Edit as desired, the above will display at 60% of the display.

    Thanks!

    Rebecca

    #115491

    wroostma
    Member

    Thank you, worked like a dream! I have another question on images… the static home page looks so cool because you can have ‘immersive’ (big all-encompassing) images on that page. Can you have the same on pages other than the home page?

    Thanks!

    #115514

    rezzap
    Staff

    Hello!

    I’m afraid it’s only possible to have the layout as seen on the homepage of the demo site on the front page of the site.

    Thanks,

    Rebecca

    #115515

    wroostma
    Member

    OK thanks. So we can’t even have a big splashy image further down on any of the other pages?

    Do you know how to hide multiple titles?
    I have this CSS code:

    .page-id-205 .headline.img-headline {
    display: none;
    }

    But that’s just one page. I don’t know how to concatenate with page 216 also. I can’t find the answer in any of the forum questions.
    Thank you Rebecca!
    Kerren

    #115516

    wroostma
    Member

    I actually want to delete the whole title bar on the Services page.
    https://wroostmarketing.com/services-2/
    I’m combing the message boards to try to find an answer, but can’t. Would you know the CSS?
    Thanks!

    #115542

    rezzap
    Staff

    Hi Kerren,

    If you change the id from ‘205’ to ‘216’ and add the code as a new code then it will hide on this line also. For example:

    .page-id-205 .headline.img-headline,
    .page-id-216 .headline.img-headline {
    display: none;
    }

    By adding the coma you can then add as many pages as needed.

    Since your page Services doesn’t have a featured image though, the CSS would be as follows:

    .page-id-216 .headline {
         display: none;
    }

    Let me know if there’s any issues with this.

    Thanks!

    Rebecca

    #115572

    wroostma
    Member

    Thank you guru! I have some more questions, will start a new thread?

    #115574

    rezzap
    Staff

    Hi Kerren,

    Feel free to start a new thread if you have questions related to another topic. :)

    Thanks!

    Rebecca

The topic ‘Shorten header image on static front page’ is closed to new replies.