Changeset 4821

Timestamp:

01/29/2017 10:29:23 AM (9 years ago)

Author:

samuelsidler

Message:

Breathe: Improve responsiveness of site title.

The site title gets hidden at smaller viewports. To fix this, it needs a max-width as well as a max font-size. Using viewport width as a base works well for the font-size, but requires added fallback in px for browsers that do not support the vw sizing unit.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe/style.css (modified) (2 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-breathe/style.css

@@ -117 +117 @@
 }
 
+@media (max-width: 500px) {
+    .site-header .site-title {
+        max-width: 334px;
+        margin-top: 4px;
+    }
+    .site-header .site-title a {
+        font-size: 17px;
+        font-size: 4.5vw;
+    }
+}
+
 @media (max-width: 400px) {
-    .site-header .site-title a {
-        font-size: 16px;
-    }
+    .site-header .site-title {
+        max-width: 295px;
+    }
+}
+
+@media (max-width: 320px) {
+    .site-header .site-title {
+        max-width: 240px;
+    }
+    .site-header .site-title a {
+        font-size: 13px;
+        font-size: 4.2vw;
+    }   
 }
 
@@ -233 +254 @@
     #secondary-toggle {
         margin-left: 22px;
+        margin-right: 0px;
     }