Shorten height of header image to allow content below visible when loading

[markman2222]

Hi:

Have been looking for a way to reduce the height of the header image by about 200px on the home page using the Genesis/Showcase Pro Theme.

Physically resizing the image and re-uploading has no effect as the theme just automatically resizes the image to fill the space. There must be a CSS fix for this, but I can't find it.

Thanks!

https://1099oremployee.com/

[Brad Dalton]

Line 2168 in style.css, you'll find this rule which you can modify to reduce the padding.

@media only screen and (min-width: 800px) {

	.page-header {
		padding: calc(7% + 10.8rem) 0 7%;
	}

	.home .page-header {
		padding: calc(10% + 10.8rem) 0 10%;
	}

	.page-header h1,
	.page-header .author-box-title {
		font-size: 6rem;
	}

	.page-header .entry-meta {
		font-size: 1.6rem;
	}

}

---

Tutorials for StudioPress Themes.

[jennifergrayeb]

Which part of this do we change? I've tried tweaking a few of these numbers and nothing seems to be doing it. I still have a ton of white space under my website name and menu.

[Steven Arends]

This was really helpful. I used the same techniquie in my website. If you wanna check how i implremented this then be sure to check it:
https://10scopes.com/
Thanks.

[Brad Dalton]

Change this value

calc(7% + 10.8rem) 0 7%;

There's also a rule for the home page header

Learn more https://www.w3schools.com/cssref/tryit.asp?filename=trycss_func_calc

Note : Always clear caching after modifying CSS.

---

Tutorials for StudioPress Themes.

[Steven Arends]

Thanks Man

[jennifergrayeb]

Thank you!! Which number in that value is the one I am looking to adjust? (ie., the first 7, 10.8, 0, or the second 7?) I didn't have luck with any of them but maybe its a cache issue? The site I am working on is TedFleming.com

[Author]

Posts