1 files changed, 18 insertions, 29 deletions

diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index cbd390e7145..1961bc2dd16 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -14,13 +14,12 @@
 .blank-state-row {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
-  height: 100%;
+  justify-content: space-between;
 }
 
 .blank-state-welcome {
   text-align: center;
-  padding: 20px 0 40px;
+  padding: $gl-padding 0 ($gl-padding * 2);
 
   .blank-state-welcome-title {
     font-size: 24px;
@@ -32,22 +31,13 @@
 }
 
 .blank-state-link {
-  display: block;
   color: $gl-text-color;
   flex: 0 0 100%;
   margin-bottom: 15px;
 
-  @include media-breakpoint-up(sm) {
-    flex: 0 0 49%;
-
-    &:nth-child(odd) {
-      margin-right: 5px;
-    }
-
-    &:nth-child(even) {
-      margin-left: 5px;
-    }
-  }
+  // @include media-breakpoint-up(sm) {
+  //   flex: 0 0 49%;
+  // }
 
   &:hover {
     background-color: $gray-light;
@@ -63,15 +53,20 @@
 }
 
 .blank-state {
-  padding: 20px;
+  display: flex;
+  align-items: center;
+  padding: 20px 50px;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    padding: 50px 30px;
+  min-height: 240px;
+  margin-bottom: $gl-padding * 2;
+  flex: 0 0 calc(50% - #{$gl-padding});
+
+  @include media-breakpoint-down(sm) {
+    flex: 0 0 100%;
+    flex-direction: column;
+    justify-content: center;
+    padding: 50px 20px;
   }
 }
 
@@ -90,7 +85,7 @@
   }
 
   .blank-state-body {
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       text-align: center;
       margin-top: 20px;
     }
@@ -121,9 +116,3 @@
     }
   }
 }
-
-@include media-breakpoint-down(xs) {
-  .blank-state-icon svg {
-    width: 315px;
-  }
-}