❤️ calc, it makes everything so easy:
.thing {
background-color: #000;
$maxWidth: 74rem;
@media ( min-width: $maxWidth ) {
// This is `max-width: $maxWidth` with a full width background.
padding-left: calc( 50vw - #{$maxWidth/2} ); // ( (100vw - $maxWidth) / 2 )
padding-right: calc( 50vw - #{$maxWidth/2} ); // ( (100vw - $maxWidth) / 2 )
}
}
Leave a Reply