From a968d3653ec52e36ab6e10b97f0a9ea0df8bdc43 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Wed, 25 Jan 2023 18:51:40 +1000
Subject: [PATCH] formatting on mobile

---
 resources/js/components/SMCarousel.vue      |  9 +++++++
 resources/js/components/SMCarouselSlide.vue | 28 ++++++++++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/SMCarousel.vue b/resources/js/components/SMCarousel.vue
index 1c5accf..c92f270 100644
--- a/resources/js/components/SMCarousel.vue
+++ b/resources/js/components/SMCarousel.vue
@@ -193,4 +193,13 @@ const disconnectMutationObserver = () => {
         }
     }
 }
+
+@media only screen and (max-width: 400px) {
+    .carousel {
+        .carousel-slide-prev,
+        .carousel-slide-next {
+            font-size: 150%;
+        }
+    }
+}
 </style>
diff --git a/resources/js/components/SMCarouselSlide.vue b/resources/js/components/SMCarouselSlide.vue
index 48d4d86..95521d6 100644
--- a/resources/js/components/SMCarouselSlide.vue
+++ b/resources/js/components/SMCarouselSlide.vue
@@ -119,16 +119,19 @@ handleLoad();
             max-width: 600px;
             margin: 0;
             text-shadow: 0 0 8px rgba(0, 0, 0, 1);
+            text-align: left;
         }
 
         p {
+            display: inline-block;
             color: #fff;
-            margin-bottom: 2rem;
             max-width: 600px;
             text-shadow: 0 0 8px rgba(0, 0, 0, 1);
+            text-align: left;
         }
 
         .carousel-slide-body-buttons {
+            margin-top: 2rem;
             text-align: right;
             max-width: 600px;
         }
@@ -177,5 +180,28 @@ handleLoad();
 }
 
 @media only screen and (max-width: 640px) {
+    .carousel-slide .carousel-slide-body {
+        h3,
+        p {
+            text-align: center;
+        }
+    }
+}
+
+@media only screen and (max-width: 400px) {
+    .carousel-slide .carousel-slide-body {
+        .carousel-slide-content {
+            padding-left: 3rem;
+            padding-right: 3rem;
+        }
+
+        h3 {
+            font-size: 175%;
+        }
+
+        p {
+            display: none;
+        }
+    }
 }
 </style>