Faux Full Width Page Titles in a Genesis Child WordPress Theme

 

This layout calls for a full viewport width background color of the page title which is to appear on all pages, there are a defined amount of pages on the site with short titles.

To achieve this effect using the sample Genesis child theme you can take advantage  of the .site-inner div

Change the CSS

.site-inner {
    background-color: #483B8B;
    height: 100px;
    max-width: none;
}

By changing the max-width value to none the element will extend to the size of the viewport whilst the height and background-color edits will give it shape and color.

.entry-title {
    color: #FFFFFF;
    font-family: 'Conv_MyriadPro-BoldCond',Arial,sans-serif;
    font-size: 85px;
    position: relative;
    top: -20px;
}

The second CSS rule takes care of the page title with the position and top CSS attributes moving the page title up into the colored .site-inner div.

This can also be applied to entry-titles for Categories.

Dealing with Narrow Viewport

One issue that may arise is that if the title has a few words and viewed via a mobile device the line may wrap to 2 lines and if you are using white type – that type may disappear, the effect can be  changed with a media query.

	@media only screen and (max-width: 600px) {

	.site-inner {
	max-width: none;
	background-color: transparent;
	height: auto;
	padding-left:0;
	padding-right:0;
	}
	.entry-title {
	background-color: #483b8b;
	padding: 2%;
	font-size:65px;
	}
	.entry-content {
	padding-left:5%;
	padding-right:5%;
	}

}

So in this CSS the .site-inner div is set back to normal with no padding to give it full width, and the .entry-title takes care of the background color and padding and the .entry-content now takes care of the padding for the rest of the content.

 

Final site.