Responsive Full Width Header in AgentPress Pro

[doire]

I've added a full width header to my AgentPress pro theme, using the tutorial here: http://wpsites.net/web-design/add-full-width-header-image-to-executive-pro-theme/.

The problem I have is the height of the site-title, it is fixed at 214 px. So, although the width of the image adjusts to fit screen size, the height doesn't, leaving a large area of white space below the image. Any help is greatly appreciated.

http://colsonyachtdesign.com.au/test/

[Brad Dalton]

If you inspect the white space you'll see the following CSS rule which adds 50px.
Thats causing the white space.

.home-featured .wrap {
	position: relative;
	padding: 50px 0 0;
}

Also, the header image doesn't display full width of screen because its limited to a max width of 1280px which you can change to none:

.wrap {
    margin: 0 auto;
    max-width: 1280px;
}
<?pre>
Tutorials for StudioPress Themes.

[doire]

Thanks for the quick reply Brad, but I think I was unclear in my original message.

The image is not full width above 1280 px, so the max-width setting is ok.

However, when I said white space, I wasn't referring to the padding, it's the background of the title-area div (and the space isn't white as you can see from the image).

Do you have any other suggestions?

Thanks

.header-image .title-area, .header-image .site-title, .header-image .site-title a {
    display: inline-block;
    float: left;
    margin: 0;
    max-width: 1280px;
    min-height: 214px;
    padding: 0;
    width: 100%;

[doire]

Thanks for the quick reply Brad, but I think I was unclear in my original message.

The image is not full width above 1280 px, so the max-width setting is ok.

However, when I said white space, I wasn't referring to the padding, it's the background of the title-area div (and the space isn't white as you can see from the image).

Do you have any other suggestions?

Thanks

.header-image .title-area, .header-image .site-title, .header-image .site-title a {
    display: inline-block;
    float: left;
    margin: 0;
    max-width: 1280px;
    min-height: 214px;
    padding: 0;
    width: 100%;

(Having trouble posting this, please accept my apologies if it's come through a few times.)

[Author]

Posts