Adding space between badges for medium-sized viewports

Adding space between badges for medium-sized viewports
From 4cc0a3503b03311c477aabed41f3bd6ad308a338 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 11 Dec 2018 09:45:49 -0500
Subject: [PATCH] Adding space between badges for medium-sized viewports


diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 1ac4bab..332189a 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -206,15 +206,19 @@
   }
 
   &.medium {
-    vertical-align: top;
-    flex: 0 0 32%;
+    flex: 0 0 auto;
+    width: 32%;
     margin-right: calc(2% - 3px);
-    &:nth-of-type(3n) {
-      margin-right: 0;
+    @media screen and (min-width: 851px) {
+      &:nth-of-type(3n) {
+        margin-right: 0;
+      }
     }
     @include breakpoint(medium) {
-      flex: 0 0 49%;
-      margin-right: 0;
+      width: 48.5%;
+      &:nth-of-type(2n) {
+        margin-right: 0;
+      }
     }
     @include breakpoint(mobile) {
       flex: 0 0 100%;
@@ -225,9 +229,6 @@
     &:active {
       box-shadow: none;
     }
-    @include breakpoint(mobile-small) {
-      width: 100%;
-    }
   }
   &.large {
     width: 100%;

GitHub

1 Like