0

I am trying to make the featured image full width in my wordpress theme. I want it so that when you go to the individual posts page the featured image is full width at the top. (similar to (http://www.fashionmumblr.com/2016/12/12-days-vlogmas-giveaways.html) Does anyone have any suggestions for how I could achieve this?

        add_image_size('banner-image', 9999, 9999, true);

and css

.banner-image img {
width:100%;
}

Here is my single.php

<?php
get_header();
the_post_thumbnail('banner-image');
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">

<?php wpb_set_post_views(get_the_ID()); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();

?>

Here is my header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="container">
<!-- site-header -->
<header class="site-header">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<h5><?php bloginfo('description'); ?></h5>


        <?php wp_nav_menu(array(
'menu' => 'Primary Menu Links', 
'container_id' => 'cssmenu', 
'walker' => new CSS_Menu_Walker()
)); ?>

    </header>
2
  • Do you have a wrapper around all that content? Probably from your header.php
    – ngearing
    Dec 21, 2016 at 4:04
  • No I don't think I do. I put my header.php in my original question. Dec 21, 2016 at 14:07

1 Answer 1

1

Use the following CSS to target only the banner image on single posts:

body.sinlge .size-banner-image {
    width:100%;
}

This will only work if your <div class="container"> element is not restricted in its width, else the banner will only stretch to the container width.

6
  • How would I make sure it is not restricted in width? Should I change Dec 21, 2016 at 14:35
  • add_image_size('banner-image', 9999, 9999, true); Dec 21, 2016 at 14:36
  • The sizes in add_image_size() only determines to what size the image file is cropped, it doesn't set how the file will be presented. To check if the container element is restricted in with use the developer tools in your browser.
    – JHoffmann
    Dec 21, 2016 at 14:41
  • My container is not restricted, but the above code still doesn't work. Dec 21, 2016 at 15:24
  • Actually I think it is restricted, how would I make it not restricted? Dec 21, 2016 at 15:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.