»Hemingway Rewritten« Header Size

judaswhite · Member · Nov 4, 2014 at 4:37 pm
Copy link

Add topic to favorites
Hello,

I’m using the »Hemingway Rewritten« Theme and I just purchased the Custom Design Upgrade. Is there any chance to decrease the height of the Header?

Thank you a lot!

The blog I need help with is: (visible only to logged in users)
supportmyoffice · Member · Nov 4, 2014 at 4:46 pm
Copy link
Right now it looks like the image you have uploaded for the header is holding it at that height. Can you resize the image to be a decreased height?
judaswhite · Member · Nov 4, 2014 at 4:57 pm
Copy link
thanks for the suggestion, tried it out and – it will force me to crop my image and then size it up, so i’d end up with a pixely image meaning that the header is like »bound« to this size.. think this needs to be changed with CSS but I have no knowledge about that :(
supportmyoffice · Member · Nov 4, 2014 at 5:10 pm
Copy link
That’s right. It can be done with CSS. I will post when II get home. Hopefully someone else is at a PC and can help before I get back. @timethief is very good with this sort of thing.
thesacredpath · Member · Nov 5, 2014 at 12:31 am
Copy link
You can adjust the height of the header area, but depending on the height you would want to use (it is 426px minimum right now), there may be some other adjustments that would be needed since the block with the title and description don’t automatically center vertically.

You can upload the new image at Media > Add New so that it isn’t resized by the software and post a link to it here in the forums and we can help. It should be at least 1280px in width.
judaswhite · Member · Nov 5, 2014 at 7:34 am
Copy link
thank you! it’s 1280×291 now :)
thesacredpath · Member · Nov 5, 2014 at 4:32 pm
Copy link
Super, thanks for the link. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think. Make sure and scroll up and down, and then also narrow your browser window. It seems to work well, and the only thing I see is that your boxed logo in the center is wider than the screen on an iPhone in portrait orientation (320px) so part of the logo is cut off on each side when viewing it on my phone.
```
.site-header-image {
    background: url("https://judaswhite.files.wordpress.com/2014/11/header-test2.png") no-repeat scroll center top #181818 !important;
    background-size: contain;
    min-height: 291px;
}
```
judaswhite · Member · Nov 5, 2014 at 8:12 pm
Copy link
I like it! Thank you so much for this immense help! I’ll fix that Logo-Problem, thank you for telling me about this.
I don’t know much about writing CSS but reading is something that mostly works for me so i’m seeing that you just adjusted the height – could I just change the value in the future and it would still work?

A million thanks and have a great time! :)
thesacredpath · Member · Nov 6, 2014 at 12:28 am
Copy link
You are welcome.

Yes, just match the height of the header image. I added a background color the same as the background of your image so that the blank areas to the left and right of the image were the same color. If you change colors, you will need to adjust that background color.

No items found.