Changeset 9394

Timestamp:

01/20/2020 06:54:15 PM (7 years ago)

Author:

coffee2code

Message:

Browse Happy: Ensure browser blocks maintain even distribution across rows despite browser viewport width.

Fixes ​https://github.com/WordPress/browsehappy/issues/54

Location:

sites/trunk/browsehappy.com/public_html

Files:

• index.php (modified) (1 diff)
• style.css (modified) (3 diffs)

sites/trunk/browsehappy.com/public_html/index.php

@@ -15 +15 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-        <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css?10" />
+        <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css?11" />
         <script src="<?php echo get_template_directory_uri(); ?>/js/modernizr-1.6.min.js"></script>
         <script src="https://use.typekit.com/lsw6yis.js"></script>

sites/trunk/browsehappy.com/public_html/style.css

@@ -150 +150 @@
         color: #324B4B;
         text-shadow: 0 1px 0 rgba(255,255,255,.5), 0 -1px 0 rgba(0,0,0,.8);
-        word-break: break-word;
-        overflow-wrap: break-word;
-        -webkit-hyphens: auto;
-        -ms-hyphens: auto;
-        hyphens: auto;
 }
 
@@ -602 +597 @@
 }
 
-@media (max-width: 1168px) { #main .wrap { max-width: 960px; } }
+@media (max-width: 1168px) {
+        #main .wrap {
+                max-width: 728px;
+        }
+        #browserlist li {
+                width: 242px;
+        }
+}
 @media (max-width: 976px)  { #main .wrap { max-width: 768px; } }
-@media (max-width: 784px)  { #main .wrap { max-width: 576px; } }
-@media (max-width: 592px)  { #main .wrap { max-width: 384px; } }
+@media (max-width: 784px)  {
+        #main .wrap {
+                max-width: 484px;
+        }
+}
+@media (max-width: 592px)  {
+        #main .wrap {
+                max-width: 384px;
+        }
+        #browserlist li {
+                width: 192px;
+        }
+}
 @media (max-width: 500px) {
         header h1 {
@@ -641 +654 @@
                 float: none;
                 margin: 0 auto;
+                width: 242px;
         }
         header h1 {