Header image

biztechusa · Member · Jan 30, 2017 at 5:48 pm
Copy link

Add topic to favorites
Hi! The header image on my front page is smaller than the header image on all the other pages. Could someone help me create code so it’s as wide as the other pages? Thank you so much! (I am using a premium template “Appetite”).

The blog I need help with is: (visible only to logged in users)
timethief · Member · Jan 30, 2017 at 6:11 pm
Copy link
Please take note of what follows:
All support docs are at https://en.support.wordpress.com/
Search for custom header image there https://en.support.wordpress.com/?s=custom+header+image
Results https://en.support.wordpress.com/custom-header-image/

Theme description page with set up instructions https://wordpress.com/themes/appetite/
More theme specific set up instructions https://wordpress.com/themes/appetite/support/
Live demo site link https://appetitedemo.wordpress.com/
Premium theme support: Need extra help? Visit the Appetite support forum.
http://premium-themes.forums.wordpress.com/forum/appetite
biztechusa · Member · Jan 30, 2017 at 6:16 pm
Copy link
Got it – thanks!
timethief · Member · Jan 30, 2017 at 6:16 pm
Copy link
You’re welcome and best wishes.
kathrynwp · Staff · Jan 31, 2017 at 7:58 pm
Copy link
Hi biztechusa – do you still need help with this? Your front-page header is still shorter than the others so I wasn’t sure if you decided to go with it that way. If you still need assistance, just let me know, otherwise I’ll mark this thread resolved. Thanks!
biztechusa · Member · Jan 31, 2017 at 8:57 pm
Copy link
HI Kathryn, I actually still need help. Tried to figure it out on my own but didn’t work. Any chance you could assist? thx!
kathrynwp · Staff · Jan 31, 2017 at 9:38 pm
Copy link
Sure! Give this a try in your custom CSS:
```
@media screen and (min-width: 767px) {
  #primary-header {
    padding-top: 268px !important;
  }
}
```
We normally try to avoid using !important in CSS as it can cause issues with overriding other elements, but in this case I think it’s necessary to override some inline CSS that the theme adds directly to the HTML.

Let me know how it goes.
kathrynwp · Staff · Jan 31, 2017 at 9:42 pm
Copy link
Oh I just realized the padding should be a little different without the “Edit” link present, so feel free to adjust the 268 value as necessary so it better matches your other pages.
biztechusa · Member · Feb 1, 2017 at 9:11 pm
Copy link
Great – thanks a lot, I will try this!
biztechusa · Member · Feb 1, 2017 at 9:30 pm
Copy link
Hi Kathryn, I just tried to apply the snipped, but not quite getting it :) – It doesn’t seem to behave consistently on each page. Also, when I adjust the 268 value (even down to 0), it never shortens the width enough to look like the blog page. Any advice? thx!
kathrynwp · Staff · Feb 1, 2017 at 9:39 pm
Copy link
it never shortens the width enough to look like the blog page

Hmm. Can you explain more what you mean by the shortening the width? The header on the blog page (and all pages) should be filling the entire width of the browser screen, so maybe I’m not understanding the effect you’re after. The snippet is supposed to reduce the height, not the width, but maybe I misunderstood what you’re trying to do.

Would it be possible to show me a little sketch or mockup of what you’re after?

You can upload the image – in a graphic format like JPG, PNG, or PDF – in your Media Library, and provide a link so I can see it, or upload it with a service like Cloudup, Imgur or Snaggy.
biztechusa · Member · Feb 1, 2017 at 10:08 pm
Copy link
Sorry Kathryn – I did actually mean the height (not width). My bad :)
kathrynwp · Staff · Feb 2, 2017 at 2:13 pm
Copy link
I don’t see any custom CSS in your Customizer’s CSS editor at the moment. Could you please add it so I can take a look at why it might not be working as expected? Thanks.

No items found.