Breaking Max Width

23-06-2019

---

Not every problem requires a complex solution! Today I want to show you a technique for breaking an image out of it’s parent container using only CSS. Yep that's right, no Javascript is involved.

But first, what am I talking about?

The following image breaks its parent's container, which is centered and takes up a maximum of 32rems.

There are a few ways of achieving this effect.

You can dynamically calculate the difference and push the image to one side(This was my goto solution when first trying to solve this problem).

.full-width {
 width: 100vw;
 position: relative;
 // 32rem is the width of the parent container.
 // This could be set with an SCSS variable or CSS custom property.
 left: calc(-50vw + (32rem / 2));
 @media (max-width: 32rem) {
  left: 0;
 }
}

Luckily there are a few other ways of achieving the same effect. Some a lot more elegant than my solution above. Here's an example by Una Kravets:

.full-width {
 left: 50%;
 margin-left: -50vw;
 margin-right: -50vw;
 max-width: 100vw;
 position: relative;
 right: 50%;
 width: 100vw;
}

Playing around with that concept. Here's another similar solution, though expressed a bit more succinctly

.full-width {
 width: 100vw;
 position: relative;
 left: 50%;
 transform: translateX(-50%);
}

Example

See the Pen Blogpost image - breaking max width by Tristan White (@triss90) on CodePen.