Skip to content

Instantly share code, notes, and snippets.

@pwneddesal

pwneddesal/wrapper trick for responsive design

Created November 25, 2016 01:59
Show Gist options
  • Save pwneddesal/1c5881f836b8ecd5b6b797c70bc0280b to your computer and use it in GitHub Desktop.
Save pwneddesal/1c5881f836b8ecd5b6b797c70bc0280b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
wrapper trick for responsive design
/**
* Wrapper
*/
.wrapper {
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
margin-right: auto;
margin-left: auto;
padding-right: $spacing-unit;
padding-left: $spacing-unit;
@extend %clearfix;
@include media-query($on-laptop) {
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
max-width: calc(#{$content-width} - (#{$spacing-unit}));
padding-right: $spacing-unit / 2;
padding-left: $spacing-unit / 2;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment