[Resolved] Separate Header Width from Container Width

[Michael]

Hello,

I’m currently attempting to develop a child theme from GeneratePress. I want to have the header width expand to cover the width of the browser’s viewport (up to a certain limit), but without changing the width of the rest of the document’s body.

I attempted to do this by duplicating the following function in the child functions.php file:

Before

if ( ! function_exists( 'generate_featured_page_header_area' ) ) {
    function generate_featured_page_header_area($class)
    {
	    global $post;
	    $page_header_image_info = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
	    $page_header_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'full') );
	    $page_header_image_width = $page_header_image_info[1];
	    $page_header_image_height = $page_header_image_info[2];
		
	    if ( !empty($page_header_image) ) :
		    <strong>echo '<div class="' . $class . ' grid-container grid-parent">';</strong>
			    echo '<img src="' . $page_header_image . '" width="' . $page_header_image_width . '" height="' . $page_header_image_height . '" alt="" />';
		    echo '</div>';
	    endif;
    }
}

After

<?php

/**
 * Build the page header
 * Edited 10/10/2014
 */
function generate_featured_page_header_area($class)
{
    global $post;
	$page_header_image_info = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
	$page_header_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'full') );
	$page_header_image_width = $page_header_image_info[1];
	$page_header_image_height = $page_header_image_info[2];
		
	if ( !empty($page_header_image) ) :
		<strong>echo '<div class="' . $class . 'grid-parent">';</strong>
			echo '<img src="' . $page_header_image . '" width="' . $page_header_image_width . '" height="' . $page_header_image_height . '" alt="" />';
		echo '</div>';
	endif;
}

?>

When I observed the code of the new page, the <div> just inside the header still had the class .grid-container, which employed the auto-margins I’m trying to remove from the header, but not the rest of the body. So far I’m at a loss for how to do this.

[Michael]

Please excuse the tags inside the code. I was attempting to highlight where I made the change.

[Tom]

Maybe try this CSS:

.site-header .grid-container {
      max-width: 100%;
}

If you’re talking about the Page Header (Featured Image/Page Header addon):

.generate-page-header .grid-container {
      max-width: 100%;
}

Should achieve what you’re trying to do, with much less code 🙂

[Michael]

Yup, the first CSS did it. Thanks Tom!

[Tom]

You’re welcome! 🙂

[Author]

Posts