Merge pull request #291 from NGO-Algorithm-Audit/bugfix/events-on-mobile

fix issue where events would look bad on mobile

Author: jfparie

assets/scss/templates/_main.scss

@@ -108,7 +108,7 @@ input[type="checkbox"] {
   }
 }
 
-.img-center {
+.img-event{
   width: auto;
   height: auto;
   position: absolute;
@@ -117,12 +117,10 @@ input[type="checkbox"] {
   left: 0;
   right: 0;
   margin: auto;
-}
-
-.img-event{
   max-height: 140px;
   @media (max-width: 992px) {
     max-height:120px;
+    position: inherit;
   }
 }
 // view ≤992px

layouts/events/overview.html

@@ -50,7 +50,7 @@
                                         <div class="ac-trigger">
                                             <div class="row justify-content-between m-0" >
                                                 <div class="col-12 col-lg-2 p-0 mt-0 text-center">
-                                                    <img class="img-fluid img-center img-event p-4" src="{{$event.image}}" />
+                                                    <img class="img-fluid img-event p-4" src="{{$event.image}}" />
                                                 </div>
                                                 <div class="col pt-3 pb-5" style="background-color: #ffffff;">
                                                     <div class="row align-items-center">

layouts/partials/landingpage/activityfeed.html

@@ -89,7 +89,7 @@ <h3 style="color: #005aa7;">{{ .items_title }}</h3>
           <div class="row justify-content-between my-4 m-0">
             <!-- image -->
             <div class="col-12 col-lg-2 p-0 mt-0 text-center bg-white">
-              <img class="img-fluid img-event img-center p-2" src="{{.image}}" />
+              <img class="img-fluid img-event p-2" src="{{.image}}" />
             </div>
             <!-- /image -->