please swipe-text only visible on mobile

SamoaCodeHub · Sep 25, 2024 · ae31e3d · ae31e3d
1 parent 3c1805d
commit ae31e3d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/lib/components/Contributors.svelte b/src/lib/components/Contributors.svelte
@@ -144,7 +144,9 @@
 			</div>
 		{/each}
 	</div>
-	<p class="sm:visible mx-auto text-[#5d5c5c] dark:text-[#cecece] text-[14px]">please swipe</p>
+	<p class="lg:hidden mx-auto text-[#5d5c5c] dark:text-[#cecece] text-[14px] swipe-p">
+		please swipe
+	</p>
 	<div class="embla" use:emblaCarouselSvelte>
 		<div class="embla__container">
 			{#each team as { avatar, name, title, github, linkedin }}
@@ -234,4 +236,12 @@
 	p {
 		max-width: max-content;
 	}
+
+	.swipe-p {
+		display: none;
+		@media (max-width: 450px) {
+			display: block;
+			font-size: 14px;
+		}
+	}
 </style>
diff --git a/src/lib/components/Hero.svelte b/src/lib/components/Hero.svelte
@@ -28,7 +28,6 @@
 					class="mt-10 w-[80%] lg:w-[100%] mx-auto xl:mx-0 lg:max-w-[600px] flex sm:flex-row flex-col items-center sm:gap-8 gap-4"
 				>
 					<div class="button-wrapper flex justify-start pl-10 flex-1 w-full sm:w-auto">
-
 						<p class="sr-only">
 							Press Join us Now to find out more about becoming a Samoa Code Hub Member
 						</p>