Side by Side Diff: css/main.css
Issue 29442559:
[Demo] Issue 4961 - Fix card group field alignment on acceptableads.com (Closed)
Patch Set:
Created May 19, 2017, 5:30 a.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« no previous file
|
gulpfile.js » ('j')
|
scss/main.scss » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 * { | |
| 2 box-sizing: border-box; } | |
| 3 | |
| 4 body { | |
| 5 background: grey; | |
| 6 padding: 0; | |
| 7 margin: 0; } | |
| 8 | |
| 9 h2 { | |
| 10 font-size: 30px; } | |
| 11 | |
| 12 p { | |
| 13 margin: 0 0 10px; | |
| 14 padding: 0; } | |
| 15 | |
| 16 .card-group { | |
| 17 padding: 30px; } | |
| 18 | |
| 19 .card { | |
| 20 background: #fff; | |
| 21 border: 1px solid black; } | |
| 22 | |
| 23 .card__header { | |
| 24 height: 100px; | |
| 25 margin-bottom: 20px; | |
| 26 border: 2px solid plum; } | |
| 27 | |
| 28 .card__content { | |
| 29 border: 2px solid cornflowerblue; } | |
| 30 | |
| 31 .card__footer { | |
| 32 border: 2px solid lightcoral; } | |
| 33 | |
| 34 /* Table Layout Fallback | |
| 35 * Note - requires a set height for the .card__footer | |
| 36 */ | |
| 37 .card-group { | |
| 38 display: table; } | |
| 39 | |
| 40 .card { | |
| 41 display: table-cell; | |
| 42 position: relative; | |
| 43 width: 100%; } | |
| 44 @media (min-width: 600px) { | |
| 45 .card { | |
| 46 width: 50%; } } | |
| 47 @media (min-width: 800px) { | |
| 48 .card { | |
| 49 width: 33%; } } | |
| 50 | |
| 51 .card__content { | |
| 52 margin-bottom: 50px; } | |
| 53 | |
| 54 .card__footer { | |
| 55 height: 30px; | |
| 56 width: 100%; | |
| 57 position: absolute; | |
| 58 left: 0; | |
| 59 bottom: 0; } | |
| 60 | |
| 61 /* Grid Layout Enhancement | |
| 62 * | |
| 63 */ | |
| 64 @supports (display: grid) { | |
| 65 .card-group { | |
| 66 display: grid; | |
| 67 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } | |
| 68 .card { | |
| 69 display: inline-grid; | |
| 70 grid-template-rows: minmax(100px, auto) 1fr auto; } | |
| 71 @media all { | |
| 72 .card { | |
| 73 width: 100%; } } | |
| 74 .card__content { | |
| 75 margin-bottom: 20px; } | |
| 76 .card__footer { | |
| 77 position: relative; | |
| 78 height: auto; } } | |
| OLD | NEW |
« no previous file with comments
|
« no previous file
|
gulpfile.js » ('j')
|
scss/main.scss » ('J')
