Widget: Card: Difference between revisions
From The Lost Media Wiki
No edit summary |
No edit summary |
||
Line 24: | Line 24: | ||
grid-template-columns: 3fr 1fr; | grid-template-columns: 3fr 1fr; | ||
border-bottom: 16px solid #fff; | border-bottom: 16px solid #fff; | ||
min-height:90px; | |||
max-height:90px; | |||
} | } | ||
Latest revision as of 12:50, 3 February 2018
<style>
.card img { width: 100%; height: auto; } .card { width: auto; -webkit-column-break-inside: avoid; -moz-column-break-inside:avoid; -moz-page-break-inside:avoid; page-break-inside: avoid; break-inside: avoid-column; background: transparent; } .card-info { padding: 0 1rem; display: -ms-grid; display: grid; -ms-grid-rows: 1fr 2.5rem; grid-template-rows: 1fr 2.5rem; -ms-grid-columns: 3fr 1fr; grid-template-columns: 3fr 1fr; border-bottom: 16px solid #fff; min-height:90px; max-height:90px; } .card-title { font-size: 1.2rem; font-weight: bold; grid-row: 1 / 2; grid-column: 1 / 2; } .card-icon { grid-row: 1 / 2; grid-column: 2 / 3; justify-self: right; width: 30px; height: 30px; background-color: LightBlue; border-radius: 100%; display: -ms-grid; display: grid; -ms-grid-column-align: center; justify-items: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .card-author { grid-row: 2 / 3; grid-column: 1 / 2; -webkit-align-self: bottom; -ms-flex-item-align: bottom; -ms-grid-row-align: bottom; align-self: bottom; } .card-stats { -webkit-align-self: bottom; -ms-flex-item-align: bottom; -ms-grid-row-align: bottom; align-self: bottom; justify-self: right; } @media screen and (min-width: 30em) { .masonry-css { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } .card { width: 100%; height: auto; -webkit-column-break-inside: avoid; -moz-column-break-inside:avoid; -moz-page-break-inside:avoid; page-break-inside: avoid; break-inside: avoid-column; } } @media screen and (min-width: 100em) { .masonry-css { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } } </style>