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: Move styling for cards on committee page to committee/index.html
Created July 25, 2017, 1:33 p.m.
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« pages/solutions/index.html ('k')
|
static/scss/_variables.scss » ('j')
|
no next file with comments »
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 |
| @@ -1298,16 +1298,48 @@ |
| @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; } |
| + .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)); } } |
| + .group-5.cards > div:nth-child(4), |
| + .group-5.cards > div:nth-child(5) { |
| + margin-left: 0; } |
| + @media (min-width: 768px) and (max-width: 991px) { |
| + .group-5.cards > div:nth-child(4) { |
| + margin-left: 50%; } } |
| + @media (min-width: 700px) and (max-width: 991px) { |
| + .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; } } |
« no previous file with comments
|
« pages/solutions/index.html ('k')
|
static/scss/_variables.scss » ('j')
|
no next file with comments »
