Loderstar Header Image Height

  • Unknown's avatar
    argonautms · Member ·

    Hello! I’m having trouble with the header image height for the homepage for my site. It’s sooo big that people think they’re not advancing to other tabs when the page refreshes.

    Same with the footer. Despite the size when I upload the image itself, it seems the height for the footer image under the theme options is set and is sooo big.

    Can anyone help out with any CSS suggestions please? Thank you so much!

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

  • staff-totoro · Staff ·

    Hi there,

    The way this theme is designed, the header height is intended to be 100% of the height of the window (or device screen) it is viewed on. i.e. it is intentional that it fills the entire page when the site first loads.

    You can get around this by adding the following CSS, which changes the calculation:

    /* reduce Lodestar front page header image height */
@media screen and (min-width: 60em) {
  .lodestar-front-page:not(.lodestar-customizer) .custom-header-image {
    height: 30vh;
    padding: 0 20%;
  }
}

    To explain what this code is doing, instead of showing the header at 100% the code instructs it to fill only 30% of the vertical height, represented as 30vh

    Knowing this, you can tweak the code to find a height that works best for you. For example you could make it 40% of the normal height (40vh) or 55% (55vh) etc.

    Feel free to experiment with the code and find a height that works for you!

  • staff-totoro · Staff ·

    Hi again,

    I forgot to mention that this is the support forum for our free sites, but your Business Plan upgrade includes priority live chat support that you can access 24 hours a day (except major holidays)

    With this in mind you are encouraged to reach out to us here, and we can take a closer look at your issue in realtime. No need to wait for a reply in the forums: https://wordpress.com/help/contact

    Hope this helps!

  • Unknown's avatar
    argonautms · Member ·

    Thank you so much Jerry for responding, and also for pointing me to the right location to submit my questions!! I was learning so much from these forums that I thought this was where I should ask :) btw, your CSS code and 30% is the perfect amount for that image…. thank you for your magic!!

    I do have another question about the adaptiveness of the pages, in which I will ask in the proper location that you pointed out instead. Thank you again for your tip and help!!

  • Unknown's avatar
    argonautms · Member ·

    I know I said I’d stop asking here, but If I wanted to make that the header image for all pages, do I just take out the ‘lodestar-front-page’ in your CSS code?

  • staff-mckluskey · Staff ·

    Yes, this should do it:

    /* reduce Lodestar header image height */
@media screen and (min-width: 60em) {
  .custom-header-image {
    height: 30vh;
    padding: 0 20%;
  }
}

    Although you may need to adjust the size a bit for the rest of the pages.
    If you need more help, feel free to just start a new chat window from https://wordpress.com/help/contact, it’s easier to work on this in real-time :).

  • The topic ‘Loderstar Header Image Height’ is closed to new replies.