Make an element wider than it’s parent, in a WordPress post

For instance, in this blog, the the main article is fluid width, and on large screens it can be up 970px wide. That makes the line length too long to be readable, so the paragraphs have to be narrower. But, the images could be wider than the paragraph (since we have space), but they're inside the paragraph. Here's how to solve that (argh, that was hard to explain, check the image in the article!)

This is what we get:


This is what we want:


Making images wide

If we look at the code, we’ll see that the images are inside a fixed width paragraph:

    <img src="blog-image.jpg">

Just unwrap the element with jQuery:

$('article img').unwrap();

That’s all.


Club-Mate, the beverage →