2 files changed, 36 insertions, 41 deletions
diff --git a/assets/css/alaveteli-org.css b/assets/css/alaveteli-org.css
index 4d272bb88..bbcf26435 100644
--- a/assets/css/alaveteli-org.css
+++ b/assets/css/alaveteli-org.css
@@ -266,7 +266,8 @@ h3 {
 .how-does-it-work {
   background-color: #974495;
   position: relative;
-  padding-bottom: 0; }
+  padding-bottom: 0;
+  overflow: -x hidden; }
   @media (min-width: 40em) {
     .how-does-it-work {
       margin-top: 2em; } }
@@ -274,37 +275,40 @@ h3 {
     .how-does-it-work {
       margin-top: 4em;
       margin-bottom: 2em; } }
+  @media (min-width: 40em) {
+    .how-does-it-work .container {
+      padding-bottom: 3.5em;
+      min-height: 320px; } }
 
 .how-does-it-work__screenshot-position {
   text-align: center;
+  overflow: hidden;
   line-height: 0; }
   @media (min-width: 56.88889em) {
     .how-does-it-work__screenshot-position {
       position: absolute;
       bottom: -3px;
+      right: -40%;
+      width: 100%; }
+      .how-does-it-work__screenshot-position img {
+        width: 55%;
+        min-width: 665px;
+        left: 0;
+        bottom: 0;
+        position: absolute; } }
+  @media (min-width: 71.25em) {
+    .how-does-it-work__screenshot-position {
+      right: auto;
       left: 0;
       width: 100%; } }
 
-.alaveteli-demo-screenshot {
-  width: 100%; }
-  @media (min-width: 30em) {
-    .alaveteli-demo-screenshot {
-      width: 40%;
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 60%; } }
-
 .screenshot-annotation {
   position: absolute;
   top: 50%;
   right: 0; }
 
 .owl-item {
-  min-height: 400px; }
-  @media (min-width: 56.88889em) {
-    .owl-item {
-      min-height: 500px; } }
+  min-height: 500px; }
   .owl-item div {
     bottom: 0; }
 
diff --git a/assets/sass/alaveteli-org.scss b/assets/sass/alaveteli-org.scss
index c2478dad1..285d5be93 100644
--- a/assets/sass/alaveteli-org.scss
+++ b/assets/sass/alaveteli-org.scss
@@ -305,6 +305,7 @@ h3 {
     background-color: darken($colour_brand, 5%);
     position: relative;
     padding-bottom: 0;
+    overflow:-x hidden;
     @media(min-width: $mediumish-screen) {
         margin-top: 2em;
     }
@@ -313,41 +314,34 @@ h3 {
         margin-bottom: 2em;
     }
     .container {
-
+        @media(min-width: $mediumish-screen) {
+            padding-bottom: 3.5em;
+            min-height: 320px;
+        }
     }
 }
 
 .how-does-it-work__screenshot-position {
     text-align: center;
+    overflow: hidden;
     line-height: 0;
     @media(min-width: $large-screen) {
         position: absolute;
         bottom: -3px; // TODO: recrop the images and make this 0
-        left: 0;
+        right: -40%;
         width: 100%;
-
+        img {
+            width: 55%;
+            min-width: 665px;
+            left: 0;
+            bottom: 0;
+            position: absolute;
+        }
     }
     @media(min-width: 71.25em) {
-
-    }
-}
-
-.alaveteli-demo-screenshot {
-    width: 100%;
-    @media(min-width: $medium-screen) {
-        width: 40%;
-        position: absolute;
+        right: auto;
         left: 0;
-        bottom: 0;
-        width: 60%;
-    }
-
-    @media(min-width: $large-screen) {
-
-
-    }
-    @media(min-width: 71.25em) {
-
+        width: 100%;
     }
 }
 
@@ -358,10 +352,7 @@ h3 {
 }
 
 .owl-item {
-    min-height: 400px;
-    @media(min-width: $large-screen) {
-        min-height: 500px;
-    }
+    min-height: 500px;
     div {
         bottom: 0;
     }