Overflowing text on small screens.

wanderingmatt · Apr 30, 2012 · 0b6c0e4 · 0b6c0e4
1 parent f0b71ea
commit 0b6c0e4
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 20 deletions.
diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
@@ -184,25 +184,33 @@ nav a:hover {
   }
 
   .videos li {
-    border-bottom: 1px solid #000;
+    border-bottom: 1px solid #fff;
   }
   .videos a {
     display: table;
+    table-layout: fixed;
+    white-space: nowrap;
     width: 100%;
   }
   .videos div {
     display: table-cell;
-    width: 25%;
+    width: 30%;
   }
   .videos img {
     display: block;
-    width: 100%;
+    max-width: 100%;
   }
   .videos aside {
     display: table-cell;
+    overflow: hidden;
+    padding: 0 10px;
     text-align: left;
     vertical-align: middle;
-    width: 75%;
+    width: 70%;
+  }
+  .videos h4, .videos h5 {
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
 @media screen and (min-width: 769px) {

diff --git a/stylesheets/screen.scss b/stylesheets/screen.scss
@@ -45,37 +45,34 @@ h6 { @extend .hidden; }
     background: $purple;
   }
   .videos {
-    // background: #fff;
     li {
-      border-bottom: 1px solid #000;
-      // display: table;
-      // width: 100%;
-      // @include row;
+      border-bottom: 1px solid #fff;
     }
     a {
       display: table;
+      table-layout: fixed;
+      white-space: nowrap;
       width: 100%;
     }
     div {
       display: table-cell;
-      width: 25%;
+      width: 30%;
     }
     img {
       display: block;
-      width: 100%;
+      max-width: 100%;
     }
     aside {
       display: table-cell;
+      overflow: hidden;
+      padding: 0 10px;
       text-align: left;
       vertical-align: middle;
-      // float: left;
-      // height: 100%;
-      width: 75%;
+      width: 70%;
     }
-    hgroup {
-      // display: table-cell;
-      // height: 100%;
-      // vertical-align: middle;
+    h4, h5 {
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 }

diff --git a/views/index.html.erb b/views/index.html.erb
@@ -169,7 +169,7 @@
     </li>
     <li>
       <a class="video fancybox.iframe" data-fancybox-group="experimental" href="http://player.vimeo.com/video/40790396?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1">
-        <div class="thumbnail"><img src="/images/thumbnails/hansel-and-gretel-having-adolescent-desires.jpg" alt="Hansel and Gretel Having Adolescent Desires &bull; Fashion </div>Ball 2012" />
+        <div class="thumbnail"><img src="/images/thumbnails/hansel-and-gretel-having-adolescent-desires.jpg" alt="Hansel and Gretel Having Adolescent Desires &bull; Fashion Ball 2012" /></div>
         <aside>
           <hgroup>
             <h4>Hansel and Gretel Having Adolescent Desires</h4>
@@ -204,7 +204,7 @@
       </a>
     </li>
     <li>
-      <a class="video fancybox.iframe" data-fancybox-group="experimental" href="http://player.vimeo.com/video/11637946?title=0&amp;byline=0&amp;</div>portrait=0&amp;autoplay=1">
+      <a class="video fancybox.iframe" data-fancybox-group="experimental" href="http://player.vimeo.com/video/11637946?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1">
         <div class="thumbnail"><img src="/images/thumbnails/the-gaudy-side-of-town.jpg" alt="The Gaudy Side of Town &bull; Gayngs" /></div>
         <aside>
           <hgroup>