Skip to content

Instantly share code, notes, and snippets.

@FriendlyWP
Created June 2, 2018 16:18
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 FriendlyWP/0d94196b762b2c25c9f3fb1b1032de83 to your computer and use it in GitHub Desktop.
Save FriendlyWP/0d94196b762b2c25c9f3fb1b1032de83 to your computer and use it in GitHub Desktop.
Automatically resize footer widgets based on number of widgets present. Uses css flexbox.
.footer-widgets {
@include breakpoint(tablet) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
margin-right: -3rem;
}
.widget {
width:100%;
border-bottom:1px solid $white;
padding-bottom:1.5rem;
@include breakpoint(tablet) {
width: 25%;
padding-right: 1.5rem;
margin-right:1.5rem;
box-sizing: border-box;
-webkit-flex-grow: 1;
flex-grow: 1;
border-right: 1px solid $white;
border-bottom:0;
padding-bottom:0;
&:last-of-type {
border-right:none;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment