From 5cf59019f98aa84ba6cd2c1cd85c5b349a7bfbe2 Mon Sep 17 00:00:00 2001
From: Brian Jacobel <bjacobel@gmail.com>
Date: Mon, 5 Dec 2016 12:12:44 -0500
Subject: [PATCH] Fix sharing icons on certificate page at narrower resolutions

---
 lms/static/certificates/sass/_layouts.scss | 59 ++++++++++++----------
 1 file changed, 32 insertions(+), 27 deletions(-)

diff --git a/lms/static/certificates/sass/_layouts.scss b/lms/static/certificates/sass/_layouts.scss
index 300468997f..6061d4105b 100644
--- a/lms/static/certificates/sass/_layouts.scss
+++ b/lms/static/certificates/sass/_layouts.scss
@@ -80,36 +80,41 @@
             margin-bottom: spacing-vertical(small);
         }
 
-        .message-actions .action {
-            display: block;
-            width: 100%;
-            margin: 0 auto spacing-vertical(small) auto;
+        .message-actions {
+            @include span(12);
 
-            &:last-child {
-                margin-bottom: 0;
-            }
-
-            // CASE: icon display only
-            &.icon-only {
-
-                @media(min-width: $bp-screen-md) {
-                    padding: spacing-vertical(x-small) spacing-horizontal(base);
-
-                    .icon {
-                        @include margin-right(0);
-                    }
-                }
-            }
-
-            @media(min-width: $bp-screen-md) {
-                display: inline-block;
-                vertical-align: middle;
-                width: auto;
-                margin-bottom: 0;
-                margin-right: spacing-horizontal(mid-small);
+            .action {
+                display: block;
+                width: 100%;
+                margin: 0 auto spacing-vertical(small) auto;
 
                 &:last-child {
-                    margin-right: 0;
+                    margin-bottom: 0;
+                }
+
+                // CASE: icon display only
+                &.icon-only {
+
+                    @media(min-width: $bp-screen-md) {
+                        padding: spacing-vertical(x-small) spacing-horizontal(base);
+
+                        .icon {
+                            @include margin-right(0);
+                        }
+                    }
+                }
+
+                @media(min-width: $bp-screen-md) {
+                    display: inline-block;
+                    vertical-align: middle;
+                    min-width: 130px;
+                    width: auto;
+                    margin-bottom: 0;
+                    margin-right: spacing-horizontal(mid-small);
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
                 }
             }
         }