diff --git a/resources/assets/styles/components/modal.css b/resources/assets/styles/components/modal.css
index 5146021eb..9c81e79c1 100644
--- a/resources/assets/styles/components/modal.css
+++ b/resources/assets/styles/components/modal.css
@@ -7,5 +7,14 @@
     @apply .relative .p-8 .bg-white .w-full .max-w-md .m-auto .flex-col .flex;
     transition: all 250ms ease;
     margin-top: 15%;
+
+    /**
+     * On tiny phone screens make sure there is a margin on the sides and also
+     * center the modal rather than putting it towards the top of the screen.
+     */
+    @screen smx {
+      margin-top: auto;
+      width: 90%;
+    }
   }
 }