Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Separate Header Width from Container Width

Home Forums Support Separate Header Width from Container Width

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #38461
    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.

    #38462
    Michael

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

    #38463
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #38465
    Michael

    Yup, the first CSS did it. Thanks Tom!

    #38467
    Tom
    Lead Developer
    Lead Developer
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.