Improve responsive account about page

3 files changed, 13 insertions, 5 deletions

diff --git a/client/src/app/+accounts/account-about/account-about.component.html b/client/src/app/+accounts/account-about/account-about.component.html
index 003a8045e..eae1cb509 100644
--- a/client/src/app/+accounts/account-about/account-about.component.html
+++ b/client/src/app/+accounts/account-about/account-about.component.html
@@ -1,10 +1,10 @@
 <div *ngIf="account" class="row">
-  <div class="description col-md-6 col-sm-12">
+  <div class="block col-md-6 col-sm-12">
     <div class="small-title">Description</div>
     <div class="content">{{ getAccountDescription() }}</div>
   </div>
 
-  <div class="stats col-md-6 col-sm-12">
+  <div class="block col-md-6 col-sm-12">
     <div class="small-title">Stats</div>
 
     <div class="content">Joined {{ account.createdAt | date }}</div>
diff --git a/client/src/app/+accounts/account-about/account-about.component.scss b/client/src/app/+accounts/account-about/account-about.component.scss
index b1be7d4ed..5bcd4b561 100644
--- a/client/src/app/+accounts/account-about/account-about.component.scss
+++ b/client/src/app/+accounts/account-about/account-about.component.scss
@@ -1,8 +1,12 @@
 @import '_variables';
 @import '_mixins';
 
-.small-title {
-  @include in-content-small-title;
+.block {
+  margin-bottom: 40px;
 
-  margin-bottom: 20px;
+  .small-title {
+    @include in-content-small-title;
+
+    margin-bottom: 20px;
+  }
 }
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 9aef0c56d..2e1e5bf65 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -111,6 +111,10 @@ label {
   &:hover, &:active, &:focus {
     color: #000;
   }
+
+  @media screen and (max-width: 500px) {
+    margin-right: 20px;
+  }
 }
 
 .admin-sub-header {