Reduce Header Height in Hemingway Reloaded

  • Unknown's avatar
    andrewmcneeley · Member ·

    I’ve uploaded my image at 468X1280 as suggested, but it is so big that on my display I see literally zero whitespace underneath and the menu drop downs don’t even show. I am concerned that a visitor will have a hard time understanding they need to scroll down every single page to start seeing something.

    I can resize my image to fit any size I need so the responsive theme works, just not sure what to do here.

    Alternatively, I would be OK with inserting some code that automatically loaded the page scrolled down 150px or so. That way I can keep the whole image and still show off content.

    Open to suggestions ! Thanks!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, add the following and adjust the min-height value. It seems to work at 226px and still shows the text in your image fully.

    .site-header-image {
min-height: 426px;
}
  • Unknown's avatar
    andrewmcneeley · Member ·

    OK That works really well, except for the mobile version. It cuts the text about halfway. Is there any way to convince the mobile version to use the original setting which, paradoxically actually works better. I tried unchecking “use this css on mobile” but it had no effect.

  • Unknown's avatar
    thesacredpath · Member ·

    We can use a media query to limit the change to 800px and above, which is where the theme resizes the image and makes it adjust width with the browser window or display. Change what I had give you to the following and see what you think.

    @media screen and (min-width: 800x) {
.site-header-image {
	min-height: 250px;
}
}

    The text beside the image gets cut off on the right, at 1030px in width. You can limit the above to 1030px if you wish and see how that looks and works when you narrow down your browser.

  • Unknown's avatar
    andrewmcneeley · Member ·

    Hmmm. Right now the site has your code pasted exactly as you gave it to me. I see the responsiveness but now I lose the reduced header size in normal resolution. (I’m at 1093 X 614 which should trigger it if we set it at 800px.

    I admit to being confused. :)

  • Unknown's avatar
    designsimply · Member ·

    There’s an ever-so-small typo in the last example. Try changing 800x to 800px — I think that should fix the problem.

  • Unknown's avatar
    andrewmcneeley · Member ·

    It certainly did. I should have seen that…to tired and to be honest this is my first time ever using css. It seems to make sense though, from what I’ve seen so far. off topic- but would either of you have a recommended book or web resource for learning how css works?

    Thank you both so much for your help!
    Andrew

  • Unknown's avatar
    thesacredpath · Member ·

    Andrew, you are welcome from me. What a difference a “p” makes. Many thanks @designsimply for catching that. :)

  • The topic ‘Reduce Header Height in Hemingway Reloaded’ is closed to new replies.