Full width wrapper

You,web developmentcss

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.