Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: css/main.css

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

Powered by Google App Engine
This is Rietveld