Featured Image – Full Width?

Hi there, my first thought on this request was that it would be difficult to do only with CSS, but I surprisingly I was able to do it. This is the CSS to try. I don’t see any issues with this, but make sure and check it in a tablet and phone just to make sure.

.entry-wrapper {
    max-width: 100%;
    width: 100%;
}
.entry-wrapper .post-thumbnail img {
    width: 100%;
}

Worked like a charm, thank you. Was having trouble separating the post-thumbnail width from the header width, but that works perfectly ??

Hi sacredpath (or anyone else that would like to help) – a quick follow-up:

While this worked brilliantly and produces full-screen images, the featured images created are still only 984px wide originally and therefore scaled if the browser width is above this size. This makes the images quite noticeably pixelated on larger screens.

Is there any easy way around this? I had a look at the Post Thumbnail sections in the functions.php file, but changing any of the 984 values didn’t seem to change anything?

Are you changing the width for the featured image in your child functions.php or in the original theme?

You would want to add the featured image PHP to your child theme functions.php file. That addition would not change any existing images. For that, you would either have to delete and reinsert the images into the posts/pages, or use something like the Regenerate Thumbnails plugin. I believe that those two modifications should do the trick.

That’s fantastic. Many thanks. Regenerating the thumbnails was the thing I had missed; that plugin is very useful.

One other thing to note for anyone else that stumbles across this, I also had to change the width for ‘Large size’ in Settings > Media in the WP dashboard as that was capped at 1024px by default.

Many thanks again sacredpath.

You are welcome.