Skip to content

Commit f59191d

Browse files
myleshortonmyleshorton
committed
added media queries for width and height and tweaked width logic a bit more generally
1 parent 397f6be commit f59191d

1 file changed

Lines changed: 62 additions & 2 deletions

File tree

  • src/github.com/getlantern/lantern-ui/app/_css

‎src/github.com/getlantern/lantern-ui/app/_css/news.css‎

Lines changed: 62 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
top: 135px;
44
text-align: left;
55
margin: 0 auto;
6-
width: 628px;
76
}
87

98
#news .nav {
109
height: 24px;
1110
margin: 0;
11+
margin: 0 auto;
1212
}
1313

1414
#news a {
@@ -50,10 +50,70 @@
5050

5151
#news .tab-content {
5252
border: 1px solid black;
53+
margin: 0 auto;
54+
}
55+
56+
@media (min-width: 780px){
57+
#news .tab-content, #news .nav {
58+
width: 700px;
59+
}
60+
}
61+
62+
@media (max-width: 780px){
63+
#news .tab-content, #news .nav {
64+
width: 500px;
65+
}
66+
}
67+
68+
@media (max-width: 600px) {
69+
#news .tab-content, #news .nav {
70+
width: 450px;
71+
}
72+
}
73+
74+
@media (max-width: 400px) {
75+
#news .tab-content, #news .nav {
76+
width: 250px;
77+
}
78+
}
79+
80+
@media screen and (max-height: 1020px) {
81+
#news .tab-content {
82+
height: 700px;
83+
}
84+
}
85+
86+
@media screen and (max-height: 920px) {
87+
#news .tab-content {
88+
height: 600px;
89+
}
90+
}
91+
92+
@media screen and (max-height: 820px) {
93+
#news .tab-content {
94+
height: 500px;
95+
}
96+
}
97+
98+
@media screen and (max-height: 720px) {
99+
#news .tab-content {
100+
height: 400px;
101+
}
102+
}
103+
104+
@media screen and (max-height: 620px) {
105+
#news .tab-content {
106+
height: 300px;
107+
}
108+
}
109+
110+
@media screen and (max-height: 520px) {
111+
#news .tab-content{
112+
height: 200px;
113+
}
53114
}
54115

55116
#news .tab-pane {
56-
height: 429px;
57117
overflow: scroll;
58118
background-color: #fafbfb;
59119
}

0 commit comments

Comments
 (0)