Fix/activity mobile responsiveness (#7641)

* fix(activity): resolve text overlap on image in mobile * fix(activity): resolve mobile responsiveness issue
gitcoinco · Oct 9, 2020 · 0a61e0c · 0a61e0c
1 parent bc43b1b
commit 0a61e0c
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/app/retail/templates/shared/activity.html b/app/retail/templates/shared/activity.html
@@ -18,10 +18,10 @@
 
 {% load humanize i18n static grants_extra %}
 <div class="box d-block m-0 mb-3 activity {% if is_pin %} pinned-activity {% else %} infinite-item {% endif %} {{ row.activity_type }} px-sm-3 py-4" {% if not is_pin %} data-pk="{{row.pk}}" {% endif %}>
-  <div class="activity_main row bg_{{ row.activity_type }}">
+  <div class="activity_main pl-2 row bg_{{ row.activity_type }}">
     <div class="col-2 p-0">
       <div class="activity-avatar">
-        <a id="profile-avatar-link" style="display:flex; width: 6.1rem; height: 6.1rem; margin-left: auto; margin-right: auto;" href="{{ row.profile.url }}" data-toggle="tooltip" title="@{{row.profile.handle}}">
+        <a id="profile-avatar-link" href="{{ row.profile.url }}" data-toggle="tooltip" title="@{{row.profile.handle}}">
           <img class="avatar rounded-circle" src="https://gitcoin.co/dynamic/avatar/{{row.profile.handle}}"/>
         </a>
         <div class="position-relative">
@@ -56,7 +56,7 @@
         {% endif %}
       </div>
     </div>
-    <div class="col-10 col-sm-8 pl-2 px-sm-0 activity_detail">
+    <div class="col-10 col-sm-8 pl-3 activity_detail">
       <div>
         {% include 'profiles/presence_indicator.html' with last_chat_status=row.profile.last_chat_status chat_id=row.profile.chat_id handle=row.profile.handle additionalclasses="mini" show_even_if_offline=1 %}
         <b>{% firstof row.profile.data.name or row.profile.handle %}</b>
@@ -526,7 +526,7 @@
           <img class="logo-metacard rounded-circle" src="{% url 'org_avatar' row.bounty.bounty_owner_github_username %}">
         {% endif %}
       </div>
-      <div class="col-12 col-md-7 d-flex flex-column">
+      <div class="col-12 col-md-7 d-flex flex-column pl-5">
         <div class="bounty-detail">
           <div class="title font-subheader font-weight-bold">
             {{ row.metadata.description }}
@@ -555,7 +555,7 @@
           <img class="logo-metacard rounded-circle" src="{% url 'org_avatar' row.bounty.bounty_owner_github_username %}">
         {% endif %}
       </div>
-      <div class="col-12 col-md-7 d-flex flex-column">
+      <div class="col-12 col-md-7 d-flex flex-column pl-5">
         <div class="bounty-detail">
           <div class="title font-subheader font-weight-bold">
             {{ row.bounty.title }}