diff --git a/resources/js/components/SMCarousel.vue b/resources/js/components/SMCarousel.vue
index 3a3bd39..574ef3f 100644
--- a/resources/js/components/SMCarousel.vue
+++ b/resources/js/components/SMCarousel.vue
@@ -132,7 +132,7 @@ const disconnectMutationObserver = () => {
position: relative;
height: 26rem;
background: #eee;
- // overflow: hidden;
+ overflow: hidden;
&:hover {
.carousel-slide-prev,
diff --git a/resources/js/components/SMCarouselSlide.vue b/resources/js/components/SMCarouselSlide.vue
index dc3d9f2..15767dd 100644
--- a/resources/js/components/SMCarouselSlide.vue
+++ b/resources/js/components/SMCarouselSlide.vue
@@ -7,10 +7,12 @@
-
{{ title }}
-
{{ content }}
-
-
+
+
{{ title }}
+
{{ content }}
+
+
+
@@ -97,11 +99,17 @@ handleLoad();
padding: 1rem;
.carousel-slide-content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
background-color: rgba(0, 0, 0, 0.75);
+ width: auto;
+ height: auto;
max-width: 800px;
padding: 2rem 3rem 1.5rem 3rem;
margin-bottom: 2rem;
border-radius: 12px;
+ margin-left: 3rem;
}
h3 {
@@ -136,4 +144,22 @@ handleLoad();
}
}
}
+
+@media (max-width: 768px) {
+ .carousel-slide {
+ .carousel-slide-body {
+ padding: 0;
+
+ .carousel-slide-content {
+ width: 100%;
+ max-width: 100%;
+ height: 100%;
+ margin: 0;
+ padding-left: 5rem;
+ padding-right: 5rem;
+ border-radius: 0;
+ }
+ }
+ }
+}