Merge pull request #921 from roiLeo/fix/profile/column

fix(profile): column responsive

Author: yangwao

src/views/OnChainProperty.vue

@@ -78,7 +78,7 @@ export default class OnChainProperty extends Vue{
         'label': this.email,
         'pack': 'fas',
         'icon': 'envelope',
-        'size': 'is-large',
+        'size': 'is-medium',
       })
     }
   }
@@ -87,7 +87,7 @@ export default class OnChainProperty extends Vue{
     if(this.verify(this.twitter)){
       this.icons.push({
         'label': this.twitter,
-        'size': 'is-large',
+        'size': 'is-medium',
         'pack': 'fab',
         'icon': 'twitter',
       })
@@ -100,7 +100,7 @@ export default class OnChainProperty extends Vue{
         'label': this.riot,
         'pack': 'fas',
         'icon': 'comment-alt',
-        'size': 'is-large',
+        'size': 'is-medium',
       })
     }
   }
@@ -111,7 +111,7 @@ export default class OnChainProperty extends Vue{
         'label': this.web,
         'pack': 'fas',
         'icon': 'globe',
-        'size': 'is-large',
+        'size': 'is-medium',
       })
     }
   }
@@ -122,7 +122,7 @@ export default class OnChainProperty extends Vue{
         'label': this.legal,
         'pack': 'fas',
         'icon': 'user',
-        'size': 'is-large',
+        'size': 'is-medium',
       })
     }
   }

src/views/Profile.vue

@@ -21,7 +21,7 @@
       <div class="column has-text-centered-mobile">
         <DonationButton :address="id" />
       </div>
-      <div class="column has-text-centered-mobile">
+      <div class="column has-text-centered">
         <OnChainProperty
           v-bind:email="email"
           v-bind:twitter="twitter"
@@ -30,12 +30,14 @@
           v-bind:riot="riot"
         />
       </div>
-      <div class="column is-narrow">
-        <Sharing
-          v-if="!sharingVisible"
-          label="Check this awesome Profile on %23KusamaNetwork %23KodaDot"
-          :iframe="iframeSettings"
-        />
+      <div class="column has-text-right-tablet">
+        <div class="share-mobile">
+          <Sharing
+            v-if="!sharingVisible"
+            label="Check this awesome Profile on %23KusamaNetwork %23KodaDot"
+            :iframe="iframeSettings"
+          />
+        </div>
       </div>
     </div>
 
@@ -375,6 +377,11 @@ export default class Profile extends Vue {
   flex-basis: auto;
 }
 
+.share-mobile {
+  width: 50%;
+  margin-left: auto;
+}
+
 @media only screen and (max-width: 768px) {
   .column-mobile {
     align-items: center;