Unified Diff: static/css/main.css
Issue 29453600:
Issue 4961 - Fix card group field alignment on acceptableads.com (Closed)
Base URL: https://hg.adblockplus.org/web.acceptableads.com
Patch Set: Rebase
Created July 17, 2017, 1:41 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« pages/committee/index.html ('K')
|
« pages/solutions/index.html ('k')
|
static/scss/_variables.scss » ('j')
|
static/scss/components/_cards.scss » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| Index: static/css/main.css |
| =================================================================== |
| --- a/static/css/main.css |
| +++ b/static/css/main.css |
| @@ -1047,16 +1047,22 @@ |
| .card h1, .card h2, .card .center blockquote, .center .card blockquote, .card h3, .card .group.items .item::before, .group.items .card .item::before, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6 { |
| height: 48px; |
| margin: 16px 0 16px 0; } |
| @media (max-width: 544px) { |
| .card h1, .card h2, .card .center blockquote, .center .card blockquote, .card h3, .card .group.items .item::before, .group.items .card .item::before, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6 { |
| height: auto; } } |
| +.card article .card-heading { |
| + height: auto; } |
| + @media (min-width: 768px) { |
| + .card article .card-heading { |
| + height: 120px; } } |
| + |
| .card-icon { |
| margin: 16px 0; } |
| .center .card-icon { |
| margin: 48px 0 32px 0; } |
| @media (max-width: 768px) { |
| .center .card-icon { |
| margin-top: 32px; } } |
| @@ -1298,16 +1304,50 @@ |
| @media (max-width: 544px) { |
| .group > div { |
| width: 100%; } |
| .group > div:nth-child(4), |
| .group > div:nth-child(3), |
| .group > div:nth-child(5) { |
| margin-left: 0; } } |
| +@supports (display: grid) { |
| + .group.cards { |
| + display: grid; |
| + grid-template-columns: repeat(1, 1fr); } |
| + @media (min-width: 350px) { |
| + .group.cards { |
| + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } } |
| + .group.cards .card { |
| + display: inline-grid; |
| + width: 100%; |
| + grid-template-rows: auto 1fr auto; } |
| + @media all { |
| + .group.cards .card-summary { |
| + height: auto; } } |
| + @media (min-width: 992px) { |
| + .group-4.cards { |
| + grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); } } |
| + @media (min-width: 768px) { |
| + .group-5.cards { |
| + grid-template-columns: repeat(auto-fit, minmax(33.3%, 1fr)); } } |
| + @media (min-width: 992px) { |
| + .group-5.cards { |
| + grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); } } |
| + @media all { |
| + .group-5.cards > div:nth-child(4), |
| + .group-5.cards > div:nth-child(5) { |
| + margin-left: 0; } } |
| + @media (min-width: 768px) and (max-width: 992px) { |
| + .group-5.cards > div:nth-child(4) { |
| + margin-left: 50%; } } |
| + @media (min-width: 700px) and (max-width: 992px) { |
| + .group-5.cards > div:nth-child(5) { |
| + margin-left: 50%; } } } |
| + |
| .masthead-img > img { |
| width: 100%; |
| margin: 32px 0; } |
| @media (max-width: 767px) { |
| .masthead.bg-info { |
| background-color: #FFFFFF; } } |
« pages/committee/index.html ('K')
|
« pages/solutions/index.html ('k')
|
static/scss/_variables.scss » ('j')
|
static/scss/components/_cards.scss » ('J')
