diff --git a/components/MiniEventCard.module.css b/components/MiniEventCard.module.css
index c3c9e0bf..59e1bbec 100644
--- a/components/MiniEventCard.module.css
+++ b/components/MiniEventCard.module.css
@@ -48,3 +48,24 @@
 .dropDownIcon {
   fill: var(--primary-accent);
 }
+
+@media only screen and (max-width: calc(768rem / 16)) {
+  .details {
+    bottom: 0;
+    left: 0;
+    top: unset;
+    right: unset;
+  }
+
+  .dropDownIcon {
+    display: none;
+  }
+
+  .card {
+    padding-bottom: calc(48rem / 16);
+  }
+
+  .nameSpacer {
+    display: none;
+  }
+}
diff --git a/components/MiniEventCard.tsx b/components/MiniEventCard.tsx
index 79e41572..be2c7928 100644
--- a/components/MiniEventCard.tsx
+++ b/components/MiniEventCard.tsx
@@ -34,10 +34,8 @@ export const MiniEventCard: React.FC<Props> = ({
           </div>
           <p className={styles.shortDescription}>{short}</p>
         </div>
-
-        <p className={styles.details}>View details {dropDownIcon}</p>
+        <div className={styles.details}>View details {dropDownIcon}</div>
       </summary>
-
       <div>{description}</div>
     </details>
   );