Improve responsive account about page

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 003a8045e3be5365679212f9f03d92ea74c9ba57..eae1cb509d708f9892073cc590d6ce62e1f9da08 100644 (file)
--- 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 b1be7d4ed8f2f7a6ee09ee74f5b8e5a5264a7959..5bcd4b5610b9cbcdd820fae9c24a513128a06801 100644 (file)
--- 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 9aef0c56de686af40e6d015633b3aced79b5327d..2e1e5bf65a99678601253f8986c78a18982b1512 100644 (file)
--- 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 {