Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Robin Cornett

    (@littlerchicken)

    Your theme has a max-width set on the .site-container element. When your featured image is large enough to use the backstretch effect, it naturally wants to fill the width of the screen. Your image is constrained by the .site-container, even though the screen may be larger.

    Depending on what you are wanting to happen, you can take a couple of different approaches. You can go through your theme’s CSS and remove the max-width on the .site-container so that the image will be the width of the screen, and the container it is in will as well. This will have some cascading effects on other site elements which will need to have that max-width applied to them so that everything is still aligned properly.

    Another option would be to use a couple of filters to 1) set the minimum backstretch width artificially high (if the image is not large enough for the backstretch effect, a large image is inserted instead, hooked into a slightly different place, but with no screen measurement); and 2) move the resulting large image to the same hook as the backstretch image would have used. Here’s an example of how you can use those (add these filters to your functions.php file, probably):

    add_filter( 'display_featured_image_genesis_set_minimum_backstretch_width', 'prefix_change_backstretch_width' );
    function prefix_change_backstretch_width( $large ) {
    	return 2000;
    }
    
    add_filter( 'display_featured_image_genesis_move_large_image', 'prefix_move_large_image' );
    function prefix_move_large_image( $hook ) {
    	return 'genesis_after_header';
    }

    This will put your featured image in the same location as it is currently, but it will not have the backstretch effects applied to it.

    Hope that helps–good luck!

    Thread Starter 7billionbuddhas

    (@7billionbuddhas)

    Thanks for the quick reply!

    I used the second option and added the code to my functions.php file. I also added the following to my css and it works perfectly!

    img.featured {
    max-width: none;
    width: 100%;
    margin-bottom: 0;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image width varies from backstretch to 100% of div’ is closed to new replies.