Fix position of close button and padding on explore landing message20830-getting-started-better-explore-groups-view

2 files changed, 22 insertions, 11 deletions

diff --git a/app/assets/stylesheets/pages/explore.scss b/app/assets/stylesheets/pages/explore.scss
index 64ec8eff1a0..4d7df49ce17 100644
--- a/app/assets/stylesheets/pages/explore.scss
+++ b/app/assets/stylesheets/pages/explore.scss
@@ -9,22 +9,34 @@
 
 .explore-groups.landing {
   margin-top: 10px;
+  padding: $gl-padding;
+  position: relative;
 
   .inner-content {
-    padding: 0;
+    display: flex;
+    justify-content: center;
 
-    p {
-      margin: 7px 0 0;
-      max-width: 480px;
-      padding: 0 $gl-padding;
+    .copy {
+      display: inline-block;
 
-      @media (max-width: $screen-sm-min) {
-        margin: 0 auto;
+      p {
+        margin: 5px 0 0;
+        max-width: 480px;
       }
     }
+
+    @media (max-width: $screen-sm-min) {
+      display: block;
+      padding: 0;
+    }
   }
 
+  .dismiss-icon {
+    top: $gl-padding;
+    right: $gl-padding;
+  }
   svg {
+    margin-right: $gl-padding;
     width: 62px;
     height: 50px;
   }
diff --git a/app/views/explore/groups/index.html.haml b/app/views/explore/groups/index.html.haml
index 1ded720cd20..6d909dbcd92 100644
--- a/app/views/explore/groups/index.html.haml
+++ b/app/views/explore/groups/index.html.haml
@@ -37,10 +37,9 @@
 
 .bordered-box.explore-groups.landing.content-block.js-explore-groups-landing.hidden
   = icon('times', class: 'dismiss-icon')
-  .row
-    .col-sm-2.col-xs-12.svg-container
-      = custom_icon('icon_explore_groups_splash')
-    .col-sm-10.col-xs-12.inner-content
+  .inner-content
+    = custom_icon('icon_explore_groups_splash')
+    .copy
       %p Below you will find all the groups that are public.
       %p You can easily contribute to them by requesting to join these groups.