Fix account badges alignment for different device view

Author: Priya5

app/assets/stylesheets/accounts/show.sass

@@ -47,8 +47,7 @@
       .btn-info
        font-size: 10px !important
   #account_name_header
-    margin-top: -134px
-    margin-left: 64px
+    margin-top: 10px
     h1
       font-size: 14px !important
       width: auto

app/assets/stylesheets/badges.sass

@@ -87,7 +87,7 @@
     &.last
       :margin-right 0
 
-#account_header
+.account_header
   .mini-badges-section
     position: relative
     margin: 27px 4px 0 0
@@ -98,9 +98,10 @@
       &.last
         margin-right: 0
 @media only all and (min-width: 320px) and (max-width: 480px)
-  #account_header
+  .account_header
     .mini-badges-section
-      margin: 5px 43px 0 0
+      margin: 0 0 15px
+      display: flex
       .account-badge
         margin: 0 20px 20px 0
 

app/views/accounts/_badges_row.html.haml

@@ -2,8 +2,6 @@
 - hide_foss_logo ||= false
 
 - badges.each_with_index do |badge, index|
-  - if header == :large && index == 4
-    %br.clear
   - if !hide_foss_logo
     - css_class = badge.css_class(badges.length, header, index)
     = link_to blog_url_for(:badges), class: "pull-left account-badge #{css_class}",

app/views/accounts/_mini_header.html.haml

@@ -1,14 +1,14 @@
 - lang = @account.most_experienced_language
 .account_header{ style: 'margin-top: 5px' }
-  .col-xs-2.col-sm-2.col-md-2#account_icon
+  .col-xs-4.col-sm-2.col-md-2#account_icon
     = link_to account_path(@account) do
       = image_tag avatar_img_path(@account, 62), size: '128x128', itemprop: 'image'
     - if lang
       - bg_color = language_color(lang.name)
       - text_color = language_text_color(lang.name)
       = link_to '', '#', style: "background-color: ##{bg_color}; color: ##{text_color};",
       title: t('accounts.mini_header.title'), class: 'center primary_language_bg'
-  .col-xs-10.col-sm-10.col-md-10#account_header
+  .col-xs-8.col-sm-10.col-md-10#account_header
     .info.pull-left
       %h1{ itemprop: 'name' }
         = link_to h(@account.name), account_path(@account)

app/views/accounts/show/_header.html.haml

@@ -1,5 +1,5 @@
 .account_header{ style: 'margin-top: 10px' }
-  .col-xs-2.col-sm-2.col-md-2#account_icon
+  .col-xs-4.col-sm-3.col-md-2#account_icon
     = image_tag avatar_img_path(@account, 128), size: '128x128', itemprop: 'image'
     - lang = @account.most_experienced_language
     - if lang
@@ -8,7 +8,7 @@
         = lang.nice_name
     - else
        
-  .col-xs-10.col-sm-10.col-md-10#account_header
+  .col-xs-7.col-sm-4.col-md-7#account_header
     .pull-left#account_name_header
       %h1{ itemprop: 'name' }= h(@account.name)
       .info
@@ -38,9 +38,9 @@
             rel: 'popup', title: "Follow @#{@account.twitter_account}" do
               %i.icon-twitter
           = render partial: 'accounts/show/header/kudo_button', locals: { css: 'btn-mini btn-info' }
-    .mini-badges-section.pull-right
-      - badges = @account.badges.map { |badge| BadgeDecorator.new(badge) }
-      = render partial: 'badges_row', locals: { badges: badges, header: :large }
+  .col-xs-12.col-sm-5.col-md-3.mini-badges-section
+    - badges = @account.badges.map { |badge| BadgeDecorator.new(badge) }
+    = render partial: 'badges_row', locals: { badges: badges }
 
 .clearfix  
 .col-xs-12.col-sm-12.col-md-12