From f7fe1125c8ff9bd58daf893223e6042b1a7b8e10 Mon Sep 17 00:00:00 2001
From: morant <morant@media.mit.edu>
Date: Fri, 15 Jan 2016 11:40:21 -0500
Subject: [PATCH] fix play button positioning

---
 src/components/microworld/microworld.jsx  |  8 ++------
 src/components/microworld/microworld.scss | 12 ++++--------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/components/microworld/microworld.jsx b/src/components/microworld/microworld.jsx
index d58340421..af5f679bf 100644
--- a/src/components/microworld/microworld.jsx
+++ b/src/components/microworld/microworld.jsx
@@ -56,14 +56,10 @@ var Microworld = React.createClass({
             height: 357,
             padding: 15
         };
-        var left = 25 * (key+1)
-        if (this.state.microworld_data.videos.length == 1) {
-            left = 50
-        }
         return (
             <div>
                 <div className="video">
-                    <div className="play-button" onClick={this.showVideo.bind(this, key)} style={{ left: left +'%', top: '60%' }}>
+                    <div className="play-button" onClick={this.showVideo.bind(this, key)}>
                     </div>
                     <img src={video.image} />
                 </div>
@@ -232,7 +228,7 @@ var Microworld = React.createClass({
         
 
         return (
-            <div>
+            <div className="inner">
                 <div className="top-banner section">
                     <h1>{microworldData.title}</h1>
                     <p>{microworldData.description.join(" ")}</p>
diff --git a/src/components/microworld/microworld.scss b/src/components/microworld/microworld.scss
index cd4905a73..8b5446bb9 100644
--- a/src/components/microworld/microworld.scss
+++ b/src/components/microworld/microworld.scss
@@ -43,8 +43,6 @@ $base-bg: $ui-white;
   .videos-container {
     display: flex;
     margin: 0 auto;
-    padding-top: 20px;
-    width: 95%;
 
     justify-content: center;
     flex-wrap: wrap;
@@ -57,14 +55,12 @@ $base-bg: $ui-white;
     }
 
     .video {
-      width: 30%;
+      position:relative;
       margin: 10px;
       border-radius: 7px;
       background-color: $active-gray;
       padding: 2px;
-
-      min-width: 300px;
-      max-width: 350px;
+      max-width: 290px;
     }
 
     img {
@@ -76,14 +72,14 @@ $base-bg: $ui-white;
 
     .play-button {
       display: block;
-
+      top: calc(50% - 25px);
+      left: calc(50% - 35px);
       opacity: .8;
       border: 5px solid $ui-border;
       border-radius: 20px;
       background-color: $type-gray;
       width: 70px;
       height: 50px;
-      top: 60%;
 
       &,
       &:after {