Changeset 28691

Timestamp:

06/06/2014 05:30:38 PM (11 years ago)

Author:

lancewillett

Message:

Twenty Fourteen: Apply max-width values to avoid site title breaking the layout in small screens. Props sixhours, rclations. See #28237.

File:

• trunk/src/wp-content/themes/twentyfourteen/style.css (modified) (8 diffs)

trunk/src/wp-content/themes/twentyfourteen/style.css

@@ -864 +864 @@
     line-height: 48px;
     margin: 0;
-}
-
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.site-title,
 .site-title a,
 .site-title a:hover {
@@ -3006 +3010 @@
 
 @media screen and (max-width: 400px) {
+    .site-title {
+        max-width: 71%;
+    }
+
     .list-view .site-content .post-thumbnail {
         background: none;
@@ -3080 +3088 @@
 
 @media screen and (min-width: 401px) {
+    .site-title {
+        max-width: 77%;
+    }
+
     a.post-thumbnail:hover img {
         opacity: 0.85;
@@ -3208 +3220 @@
 
 @media screen and (min-width: 594px) {
+    .site-title {
+        max-width: 85%;
+    }
+
     .site-content .entry-header {
         padding-right: 30px;
@@ -3221 +3237 @@
     .header-main {
         padding: 0 30px;
+    }
+
+    .site-title {
+        max-width: 89%;
     }
 
@@ -3358 +3378 @@
     }
 
+    .site-title {
+        max-width: 93%;
+    }
+
     .search-toggle {
         margin-right: 0;
@@ -3605 +3629 @@
 
 @media screen and (min-width: 1008px) {
+    .site-title {
+        max-width: 95%;
+    }
+
     .search-box-wrapper {
         padding-left: 182px;
@@ -4126 +4154 @@
     }
 
+    .site-title,
     .site-title a,
     .entry-meta,