How Reduce Header image height in Hemingway Rewritten theme

asmruniversity · Member · Jul 1, 2014 at 3:07 pm
Copy link

Add topic to favorites
I need help with asmruniversity.com that uses Hemingway Rewritten theme. I have purchased customization.

Problem: I want to decrease the height of the header image but keep the width. None of the crop and scale options seem to do it, it keeps the same dimensions.

I think I need to use the css option.

I have never edited the css before and every post I have read so far here about editing css to reduce header image height do not make any sense to me (so please do not redirect me to other posts).

I can click the “css” button in customization and see the “Welcome to custom css” text in the css window pop up.

What do I do next? Please walk me through the exact steps to change the header image height but not the width. Thanks!

The blog I need help with is: (visible only to logged in users)
lizthefair · Member · Jul 1, 2014 at 3:17 pm
Copy link
try this:
```
.site-header-image {
    min-height: 300px;
}
```
Note I just guessed on how tall you wanted it to be. Originally it was 426px. you can experiment with the # of pixels until you get it where you want it.
lizthefair · Member · Jul 1, 2014 at 3:17 pm
Copy link
just open the css box window you mentioned, and copy/paste the code in the box above into the window and click save.
asmruniversity · Member · Jul 1, 2014 at 3:22 pm
Copy link
liz, thanks for the quick reply!

Questions: do I paste that code over the welcome text in that box, before the welcome text, or after the welcome text?

Also, if it is not suitable, how do I undo it?

Sorry for my elementary-level questions.
lizthefair · Member · Jul 1, 2014 at 3:26 pm
Copy link
the welcome text right now is in there as a comment. You can tell because it’s bracketed by the /* comment */ tags.

Erasing it won’t impact your blog one way or the other, –but I recommend you paste the code below the comment as there is useful info in there that you probably don’t want to lose.
asmruniversity · Member · Jul 1, 2014 at 3:29 pm
Copy link
Thank you. I inserted the code, hit save, nothing happened :(
lizthefair · Member · Jul 1, 2014 at 3:43 pm
Copy link
That’s because I was silly. I meant MAX height.

Try this:
.site-header-image {
max-height: 300px;
}
lizthefair · Member · Jul 1, 2014 at 3:45 pm
Copy link
Sorry, one more thing–you’ll have to remove the “min-hight” reference as well:

so more like:
```
.site-header-image {
    max-height: 300px;
    min-height: none;

}
```
asmruniversity · Member · Jul 1, 2014 at 3:49 pm
Copy link
I replaced your prior css code with the code above, hit save, still nothing happened :(
lizthefair · Member · Jul 1, 2014 at 3:54 pm
Copy link
sorry, I’m new too–if we don’t get it, or if you get tired of experimenting, it’s cool to wait for an expert. I think the problem is the none command doesn’t work with min-height. Try this:
```
.site-header-image {
    max-height: 300px;
    min-height: 50px;

}
```
asmruniversity · Member · Jul 1, 2014 at 4:16 pm
Copy link
That worked! Mostly. It did decrease the height but only for the image area below the black title box that is centered on the header image. Changing the px values in your code only changes that distance. So the image shown above the black title box is still the same amount.
You can see it at http://www.asmruniversity.com

So how would I recenter the black title box, or how do I crop the image above the black title box?

But thank you so far Liz, I like my header much better already!
asmruniversity · Member · Jul 1, 2014 at 4:19 pm
Copy link
Hmmmm, part of the problem may be that the black title box has a “dynamic” nature to it.

When I view the site at full max window on my computer the distance problem I talked about above is evident, but when I resize my computer window to smaller and smaller, the black title box adjusts.
lizthefair · Member · Jul 1, 2014 at 4:31 pm
Copy link
Yeah, I see what you are talking about. I’m futzing with it. I’ll get back to you when/if I come up with something for you to try.
lizthefair · Member · Jul 1, 2014 at 4:39 pm
Copy link
try adding this:
```
.site-branding-wrapper{
    margin-top: -100px
}
```
Leave the rest of our changes there.
asmruniversity · Member · Jul 1, 2014 at 5:26 pm
Copy link
I added your last css code and that also helped me with the black title box, thanks! I had to adjust the wrapper -100px bc the mobile view was problematic but here are the current settings that help with my desktop and mobile views:

.site-header-image {
max-height: 200px;
min-height: 50px;
}

.site-branding-wrapper {
margin-top: -40px;
}

I still can’t get the black title box to stay centered for all views.

The problem can be viewed by going to asmruniversity.com and resizing the window on a desktop.

I did try changing the css code to “margin-center” and “margin-middle” but the code turned read and did not do anything.

Any other ideas? (Again, thanks so far Liz, my header is greatly improved!)
lizthefair · Member · Jul 1, 2014 at 9:07 pm
Copy link
Sorry, I lost my internet connection there for awhile. Let’s try the margin as a percentage:
```
.site-branding-wrapper {
margin-top: -5%;
}
```
asmruniversity · Member · Jul 2, 2014 at 2:10 am
Copy link
Liz, you are a wonderful goddess of persistence.

The margin % worked even better! It is not “perfectly” centered for every resizing, but now I’m just being OCD.

Here is the current css:

.site-header-image {
max-height: 200px;
min-height: 50px;
}

.site-branding-wrapper {
margin-top: -8%;
}

Thank you again Liz!

No items found.