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

Side by Side Diff: static/scss/components/_groups.scss

Issue 29438582: Issue 5135 - Reduce font size and padding on smaller screens on acceptableads.com (Closed) Base URL: https://hg.adblockplus.org/web.acceptableads.com
Patch Set: Handle responsive styling Created June 22, 2017, 3:27 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
OLDNEW
1 // This file is part of acceptableads.org. 1 // This file is part of acceptableads.org.
2 // Copyright (C) 2016 Eyeo GmbH 2 // Copyright (C) 2016 Eyeo GmbH
3 // 3 //
4 // acceptableads.org is free software: you can redistribute it and/or modify 4 // acceptableads.org is free software: you can redistribute it and/or modify
5 // it under the terms of the GNU General Public License as published by 5 // it under the terms of the GNU General Public License as published by
6 // the Free Software Foundation, either version 3 of the License, or 6 // the Free Software Foundation, either version 3 of the License, or
7 // (at your option) any later version. 7 // (at your option) any later version.
8 // 8 //
9 // acceptableads.org is distributed in the hope that it will be useful, 9 // acceptableads.org is distributed in the hope that it will be useful,
10 // but WITHOUT ANY WARRANTY; without even the implied warranty of 10 // but WITHOUT ANY WARRANTY; without even the implied warranty of
11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 // GNU General Public License for more details. 12 // GNU General Public License for more details.
13 // 13 //
14 // You should have received a copy of the GNU General Public License 14 // You should have received a copy of the GNU General Public License
15 // along with acceptableads.org. If not, see <http://www.gnu.org/licenses/>. 15 // along with acceptableads.org. If not, see <http://www.gnu.org/licenses/>.
16 16
17 // display like a table (even grid) 17 // display like a table (even grid)
18 18
19 .group-container 19 .group-container
20 { 20 {
21 width: 100%; 21 width: 100%;
22 max-width: $max-width; 22 max-width: $max-width;
23 margin: 0 auto; 23 margin: 0 auto;
24 padding: $xl 0; 24 padding: $xl 0;
25
26 @media (max-width: $desktop-breakpoint)
27 {
28 padding: $xs;
29 }
25 } 30 }
26 31
27 .group-container > %headings, 32 .group-container > %headings,
28 .group-container > p 33 .group-container > p
29 { 34 {
30 margin: $xl auto; 35 margin: $lg auto;
31 padding: 0 $sm; 36 padding: 0 $sm;
32 } 37 }
33 38
39
40 .group-container > p
41 {
42 @media (max-width: $desktop-breakpoint)
43 {
44 margin: $md auto;
45 }
46 }
47
48
49
34 .group 50 .group
35 { 51 {
36 display: table; 52 display: table;
37 width: 100%; 53 width: 100%;
38 table-layout: fixed; 54 table-layout: fixed;
39 } 55 }
40 56
41 .group-container .group 57 .group-container .group
42 { 58 {
43 margin-bottom: 0; 59 margin-bottom: 0;
44 } 60 }
45 61
46 .group-container > %headings 62 .group-container > %headings
47 { 63 {
48 margin-top: 0; 64 margin-top: 0;
65
66 @media (max-width: $desktop-breakpoint)
67 {
68 margin: $md auto;
69 }
49 } 70 }
50 71
51 .group .card, 72 .group .card,
52 .group .item 73 .group .item
53 { 74 {
54 display: table-cell; 75 display: table-cell;
55 vertical-align: top; 76 vertical-align: top;
56 } 77 }
57 78
58 .group.items .item::before 79 .group.items .item::before
(...skipping 199 matching lines...) Expand 10 before | Expand all | Expand 10 after
258 width: 100%; 279 width: 100%;
259 } 280 }
260 // un-center all cards 281 // un-center all cards
261 .group > div:nth-child(4), 282 .group > div:nth-child(4),
262 .group > div:nth-child(3), 283 .group > div:nth-child(3),
263 .group > div:nth-child(5) 284 .group > div:nth-child(5)
264 { 285 {
265 margin-left: 0; 286 margin-left: 0;
266 } 287 }
267 } 288 }
OLDNEW

Powered by Google App Engine
This is Rietveld