[Merf]

Hi, I’m a newbie setting up a new site with Catch Adaptive. I uploaded several 1680 x 720 images for the header (masthead), but on a wide display the masthead image gets “zoomed in” so it crops off the top and bottom of the images. Apparently this is because the image height seems to be controlled only by the size of the header text (site-title and site-description) and the padding that’s specified for the masthead.
Site (still incomplete) is:
https://ministryfellowship.org
On a related note, I see that the masthead height is set to 100%. 100% of WHAT? It doesn’t look like it’s either 100% of the display width (or height), or 100% of the image height, so I’m kind of scratching my head on that parameter.
Is there any way to edit the CSS so that the masthead height will “grow” as the display width increases, such that the height is either the required space (to fit the header text and padding) OR the height required to fit most of the image (whichever is greater)? I would think specifying a height percentage would do this, but I don’t see how the current “height: 100%” is doing anything, so I am totally confused on that point.
On another related note, what happens if the CSS specifies both a height, and padding around an element, and the two values conflict? For example, some 60px text, with 20px padding top and bottom, but height is set at 80px. Which one “wins”?

[Skandha]

@merf: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

#masthead {
	height:70vh !important; 
}

Let me know if this resolves the issue on wider screens.
Kind Regards,
Skanda

[Merf]

YES! That fixes it. Thanks!
One question though: My title normally runs 2 or 3 lines (depending on screen width), and when it’s 2 lines (with the masthead height modification) the line spacing is expanded. Also, the space between the title and site-description is increased. Apparently it’s expanding with the increased masthead height. Any way to keep the title and description spacing the same, even with the new masthead height?

[Skandha]

@merf: Replace the 70vh in the above CSS Code I provided you by 80vh.

Let me know if this resolves your issue.
Kind Regards,
Skandha

[Merf]

I actually set it back to 65vh because 80vh just gives too tall a masthead. The line spacing for the title looks better, but I still don’t understand what controls it.
CSS specifies the WIDTH of the masthead wrapper (width: 1280px;), which then controls the width of the site-branding and site-header (based on their padding), but what controls the HEIGHT of the wrapper? I can’t find that anywhere. Could I just add a max-height spec to the wrapper?
Also, just for my understanding, does the 65vh or 80vh control the masthead height as a percentage of the overall window height? That’s what appears to be happening, since as I shrink the window vertically, the masthead height shrinks accordingly.
Thanks for your help!

[Merf]

Hey Skandha, I finally dug a little deeper and figured out what’s going on with the site-title height!
On the Home page, the site-title is an <h1> element, which is specified with line height of 1.2. But on the single post pages (and probably others, I presume), the site-title is a <p> element, which inherits line-height: 1.5. So my titles expand (vertically) on the single-post pages compared to the Home page.
What’s the best way to fix this (assuming I want site-title to have line-height: 1.2 on all pages)? Would it just be to add .site-title { line-height: 1.2 } to the additional CSS?

[Skandha]

@merf: Yes, I think that should do the trick. Let me know if you have anymore issues.

Kind Regards,
Skadnha

[dward1958]

I am having the same issues – I would like the header image shorter as it takes up half the screen. I used the css above and it made it a bit shorter, but the image does not show up at all in tablets or phones, just on a pc screen.
https://gwrrabca.org

Dave

[Skandha]

@dward1958: You seem to have enabled the Jetpack Mobile Theme. Can you disable that and check if this resolves the issue?

Kind Regards,
Skandha

[Author]

Posts