com web/people: Improve .secondscreen on tiny viewports: styles.css
| From: | Hannes Magnusson | Date: | Thu, 12 Dec 2013 07:07:26 +0000 |
| Subject: | com web/people: Improve .secondscreen on tiny viewports: styles.css | ||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-17541@lists.php.net to get a copy of this message | ||
Commit: da4b9cf2c458178aeb3b205610320986b57e45c1
Author: Hannes Magnusson <bjori@mongodb.com> Wed, 11 Dec 2013 23:07:26 -0800
Parents: cc4b509d7bb6bae2893df7978df0ba4613bacb32
Branches: master
Link: http://git.php.net/?p=web/people.git;a=commitdiff;h=da4b9cf2c458178aeb3b205610320986b57e45c1
Log:
Improve .secondscreen on tiny viewports
Make the sidebar/search box cover a full line when it gets line-wrapped
on tiny viewports.
Make sure it doesn't overlap the content by doubling the padding-top
when we need to linewrap
Changed paths:
M styles.css
Diff:
diff --git a/styles.css b/styles.css
index 0a2d8d9..feb5b58 100644
--- a/styles.css
+++ b/styles.css
@@ -18,11 +18,20 @@
.secondscreen {
width: 220px;
}
+body {
+ margin: 50px 0 0 0;
+}
@media (max-width: 767px) {
.fullscreen {
width: auto;
padding: 0px 10px 0px 10px;
}
+ body {
+ margin: 100px 0 0 0;
+ }
+ .secondscreen {
+ width: 100%;
+ }
}
@media (min-width: 768px) and (max-width: 979px) {
.fullscreen {
@@ -43,6 +52,7 @@
width: 870px;
}
.secondscreen {
+ margin-left: 10px;
width: 270px;
}
}
@@ -59,7 +69,6 @@ body {
color: #444;
font-family: Tahoma, Arial, sans-serif, serif, monospace;
background-color: #fff;
- margin: 50px 0 0 0;
}
header {
top: 0px;
@@ -132,7 +141,6 @@ section.fullscreen {
..secondscreen {
vertical-align: top;
display: inline-block;
- margin-left: 10px;
}
.secondscreen .panel {
background: #f0f0f0;