DEV Community

Discussion on: What CSS tip do you want to share with others?

View post
Collapse
 
jamesthomson profile image
James Thomson •

I don't use it all the time, but this one comes in handy when you need something to go full width but you're confined by a container it's already in. For example, an article where you want full width images, but fixed width content.

.breakout {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
  }
Collapse
 
adrianmarkperea profile image
Adrian Perea •

First time I've seen this solution!

I usually see two variants:

  1. Use a container multiple times to only constrain particular sections of your page: 
<div class="container">...</div>
<img class="full-width" ... />
<div class="container">...</div>
  1. Break out the container by adding negative margins to both sides: 
.container {
    padding: 2rem 1rem;
}

.breakout {
    margin: 2rem -1rem;
}