Full width wrapper
Inside content that has padding/margin on sides, sometimes we need to add a slider or something inside that takes the full viewport width. It can be achieved via translations and hard coded values when you know the parent's padding/margin, but this hack allows you to perform this without parent component knowledge :
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
The way I picture it is that it "compresses" the element with its size in margin, then stretches it to full width.
CC BY-NC 4.0 2024 © Shu Ding.