From 8c076622ebcd5ca789b52dc9cf0f4a2e9328519c Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 31 Mar 2018 17:01:09 -0700
Subject: [PATCH] fix account details squished on mobile

---
 .../profile/AccountProfileDetails.html        | 55 ++++++++++++++-----
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/routes/_components/profile/AccountProfileDetails.html b/routes/_components/profile/AccountProfileDetails.html
index 0fef84ad..160bae71 100644
--- a/routes/_components/profile/AccountProfileDetails.html
+++ b/routes/_components/profile/AccountProfileDetails.html
@@ -1,27 +1,27 @@
 <div class="account-profile-details">
   <div class="account-profile-details-item">
-          <span class="account-profile-details-item-title">
-            Toots
-          </span>
+    <span class="account-profile-details-item-title">
+      Toots
+    </span>
     <span class="account-profile-details-item-datum">
-            {{account.statuses_count || 0}}
-          </span>
+      {{account.statuses_count || 0}}
+    </span>
   </div>
   <div class="account-profile-details-item">
-          <span class="account-profile-details-item-title">
-            Follows
-          </span>
+    <span class="account-profile-details-item-title">
+      Follows
+    </span>
     <span class="account-profile-details-item-datum">
-            {{account.following_count || 0}}
-          </span>
+      {{account.following_count || 0}}
+    </span>
   </div>
   <div class="account-profile-details-item">
-          <span class="account-profile-details-item-title">
-            Followers
-          </span>
+    <span class="account-profile-details-item-title">
+      Followers
+    </span>
     <span class="account-profile-details-item-datum">
-            {{account.followers_count || 0}}
-          </span>
+      {{account.followers_count || 0}}
+    </span>
   </div>
 </div>
 <style>
@@ -60,4 +60,29 @@
     margin-left: 5px;
     font-weight: 600;
   }
+
+  @media (max-width: 767px) {
+    .account-profile-details-item {
+      flex-direction: column;
+      margin-left: 5px;
+      margin-right: 5px;
+    }
+
+    .account-profile-details-item:last-child {
+      margin-right: 0;
+    }
+
+    .account-profile-details-item:first-child {
+      margin-left: 0;
+    }
+
+    .account-profile-details-item-title {
+      margin-right: 0;
+      text-align: center;
+    }
+    .account-profile-details-item-datum {
+      margin-left: 0;
+      text-align: center;
+    }
+  }
 </style>
\ No newline at end of file