Skip to content

Instantly share code, notes, and snippets.

@jeremyHixon

jeremyHixon/bootstrap-gutenberg-alignment.scss

Created August 6, 2019 20:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jeremyHixon/0096306e18821afd2c434fa838cb4401 to your computer and use it in GitHub Desktop.
Save jeremyHixon/0096306e18821afd2c434fa838cb4401 to your computer and use it in GitHub Desktop.
Download ZIP
This is the SCSS I used to make the .alignfull and .alignwide play nicely with Bootstrap
Raw
bootstrap-gutenberg-alignment.scss
// Same styles for small devices
.alignfull, .alignwide {
margin: 0 calc( 50% - 50vw ) $alignment-margin;
max-width: 100vw;
width: 100vw;
}
// At "medium" breakpoint it moves to fill in half the viewport's whitespace
@media ( min-width: map-get( $grid-breakpoints, md ) ) {
.alignwide {
margin: 0 calc( ( ( ( 100vw - 100% ) / 2 ) / 2 ) * -1 ) $alignment-margin;
max-width: calc( 100% + ( ( 100vw - 100% ) / 2 ) );
width: calc( 100% + ( ( 100vw - 100% ) / 2 ) );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment