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

Side by Side 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: Minor fixes Created July 20, 2017, 5:42 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 | « pages/solutions/index.html ('k') | static/scss/_variables.scss » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 .m-a-na { 1 .m-a-na {
2 margin: 0 0 !important; } 2 margin: 0 0 !important; }
3 3
4 .m-t-na { 4 .m-t-na {
5 margin-top: 0 !important; } 5 margin-top: 0 !important; }
6 6
7 .m-b-na { 7 .m-b-na {
8 margin-bottom: 0 !important; } 8 margin-bottom: 0 !important; }
9 9
10 .m-x-na { 10 .m-x-na {
(...skipping 1034 matching lines...) Expand 10 before | Expand all | Expand 10 after
1045 border: 1px solid #161616; 1045 border: 1px solid #161616;
1046 background-color: #FFFFFF; } 1046 background-color: #FFFFFF; }
1047 1047
1048 .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 { 1048 .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 {
1049 height: 48px; 1049 height: 48px;
1050 margin: 16px 0 16px 0; } 1050 margin: 16px 0 16px 0; }
1051 @media (max-width: 544px) { 1051 @media (max-width: 544px) {
1052 .card h1, .card h2, .card .center blockquote, .center .card blockquote, .car d 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 { 1052 .card h1, .card h2, .card .center blockquote, .center .card blockquote, .car d 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 {
1053 height: auto; } } 1053 height: auto; } }
1054 1054
1055 .card article .card-heading {
1056 height: auto; }
1057 @media (min-width: 768px) {
1058 .card article .card-heading {
1059 height: 120px; } }
1060
1055 .card-icon { 1061 .card-icon {
1056 margin: 16px 0; } 1062 margin: 16px 0; }
1057 1063
1058 .center .card-icon { 1064 .center .card-icon {
1059 margin: 48px 0 32px 0; } 1065 margin: 48px 0 32px 0; }
1060 @media (max-width: 768px) { 1066 @media (max-width: 768px) {
1061 .center .card-icon { 1067 .center .card-icon {
1062 margin-top: 32px; } } 1068 margin-top: 32px; } }
1063 @media (max-width: 544px) { 1069 @media (max-width: 544px) {
1064 .center .card-icon { 1070 .center .card-icon {
(...skipping 231 matching lines...) Expand 10 before | Expand all | Expand 10 after
1296 margin-left: 0; } } 1302 margin-left: 0; } }
1297 1303
1298 @media (max-width: 544px) { 1304 @media (max-width: 544px) {
1299 .group > div { 1305 .group > div {
1300 width: 100%; } 1306 width: 100%; }
1301 .group > div:nth-child(4), 1307 .group > div:nth-child(4),
1302 .group > div:nth-child(3), 1308 .group > div:nth-child(3),
1303 .group > div:nth-child(5) { 1309 .group > div:nth-child(5) {
1304 margin-left: 0; } } 1310 margin-left: 0; } }
1305 1311
1312 @supports (display: grid) {
1313 .group.cards {
1314 display: grid;
1315 grid-template-columns: repeat(1, 1fr); }
1316 @media (min-width: 350px) {
1317 .group.cards {
1318 grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } }
1319 .group.cards .card {
1320 display: inline-grid;
1321 width: 100%;
1322 grid-template-rows: auto 1fr auto; }
1323 .group.cards .card-summary {
1324 height: auto; }
1325 @media (min-width: 992px) {
1326 .group-4.cards {
1327 grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); } }
1328 @media (min-width: 768px) {
1329 .group-5.cards {
1330 grid-template-columns: repeat(auto-fit, minmax(33.3%, 1fr)); } }
1331 @media (min-width: 992px) {
1332 .group-5.cards {
1333 grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); } }
1334 .group-5.cards > div:nth-child(4),
1335 .group-5.cards > div:nth-child(5) {
1336 margin-left: 0; }
1337 @media (min-width: 768px) and (max-width: 991px) {
1338 .group-5.cards > div:nth-child(4) {
1339 margin-left: 50%; } }
1340 @media (min-width: 700px) and (max-width: 991px) {
1341 .group-5.cards > div:nth-child(5) {
1342 margin-left: 50%; } } }
1343
1306 .masthead-img > img { 1344 .masthead-img > img {
1307 width: 100%; 1345 width: 100%;
1308 margin: 32px 0; } 1346 margin: 32px 0; }
1309 1347
1310 @media (max-width: 767px) { 1348 @media (max-width: 767px) {
1311 .masthead.bg-info { 1349 .masthead.bg-info {
1312 background-color: #FFFFFF; } } 1350 background-color: #FFFFFF; } }
1313 1351
1314 @media (min-width: 768px) { 1352 @media (min-width: 768px) {
1315 .masthead-body > div { 1353 .masthead-body > div {
(...skipping 386 matching lines...) Expand 10 before | Expand all | Expand 10 after
1702 height: 0; 1740 height: 0;
1703 content: " "; 1741 content: " ";
1704 border-top: 2px solid #FFFFFF; } 1742 border-top: 2px solid #FFFFFF; }
1705 #footer a { 1743 #footer a {
1706 color: #FFFFFF; } 1744 color: #FFFFFF; }
1707 #footer a:hover { 1745 #footer a:hover {
1708 text-decoration: underline; 1746 text-decoration: underline;
1709 color: #8CC63E !important; } 1747 color: #8CC63E !important; }
1710 #footer p { 1748 #footer p {
1711 color: #E1E1E1; } 1749 color: #E1E1E1; }
OLDNEW
« no previous file with comments | « pages/solutions/index.html ('k') | static/scss/_variables.scss » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld