Changeset 28691

Timestamp:

06/06/2014 05:30:38 PM (12 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,