Skip to content

Instantly share code, notes, and snippets.

@garpunkal
Created June 5, 2020 11:42
Show Gist options
  • Save garpunkal/0812229791c09efc9e42f2c6ee291426 to your computer and use it in GitHub Desktop.
Save garpunkal/0812229791c09efc9e42f2c6ee291426 to your computer and use it in GitHub Desktop.
Umbraco Grid CSS - Vertical stacked icons
#umb-grid .umb-card-grid.-four-in-row,
#umb-grid .umb-card-grid.-three-in-row {
flex-flow: column wrap;
}
#umb-grid .umb-card-grid.-four-in-row .umb-card-grid-item,
#umb-grid .umb-card-grid.-three-in-row .umb-card-grid-item {
padding-top: 12%;
}
#umb-grid .umb-card-grid.-four-in-row .umb-card-grid-item > span,
#umb-grid .umb-card-grid.-three-in-row .umb-card-grid-item > span {
flex-direction: row;
-webkit-box-align: start;
align-items: start;
-webkit-box-pack: start;
justify-content: start;
-webkit-box-orient: vertical;
}
#umb-grid .umb-card-grid.-four-in-row i,
#umb-grid .umb-card-grid.-three-in-row i {
display: inline-block;
margin-right: 5px;
}
#umb-grid .umb-card-grid.-four-in-row li,
#umb-grid .umb-card-grid.-three-in-row li {
width: 100%;
max-width: 100%;
}
#umb-grid .umb-card-grid.-four-in-row li .btn-reset,
#umb-grid .umb-card-grid.-three-in-row li .btn-reset {
font-size: 12px;
}
@FransdeJong
Copy link

Looks great!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment