From 0df7a037ead17ba95f0f2e73873953a68378683d Mon Sep 17 00:00:00 2001
From: Mawoka <mawoka@e.email>
Date: Wed, 13 Apr 2022 17:21:44 +0200
Subject: [PATCH] :iphone: Images are in rows instead of columns on mobile

---
 frontend/src/lib/landing/landing-promo.svelte | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/landing/landing-promo.svelte b/frontend/src/lib/landing/landing-promo.svelte
index ebd2c8a..d614022 100644
--- a/frontend/src/lib/landing/landing-promo.svelte
+++ b/frontend/src/lib/landing/landing-promo.svelte
@@ -19,14 +19,19 @@
 		<div class="h-fit">
 			<!--			<h1 class='text-5xl marck-script text-center pt-4'>Teacher</h1>-->
 
-			<div class="grid grid-cols-2 grow pt-4 transition ease-in-out">
+			<div class="grid lg:grid-cols-2 grow pt-4 transition ease-in-out">
 				<h1 class="text-center text-3xl marck-script">1: Create or Import</h1>
-				<h1 class="text-center text-3xl marck-script">2: See all your quizzes</h1>
+				<h1 class="text-center text-3xl marck-script hidden lg:block">
+					2: See all your quizzes
+				</h1>
 				<!--				<h1 class='text-center text-3xl marck-script'>3: See how many were right or wrong</h1>-->
 
 				<div class="flex justify-center">
 					<img src={ImportSelectMockup} class="w-4/6 align-top" alt="Select answer" />
 				</div>
+				<h1 class="text-center text-3xl marck-script lg:hidden block">
+					2: See all your quizzes
+				</h1>
 				<div class="flex justify-center">
 					<img
 						src={OverviewMockup}
@@ -46,16 +51,21 @@
 	{:else}
 		<div class="h-fit">
 			<!--			<h1 class='text-5xl marck-script text-center pt-4'>Student</h1>-->
-			<div class="grid grid-cols-3 grow pt-4 transition ease-in-out">
+			<div class="grid lg:grid-cols-3 grow pt-4 transition ease-in-out">
 				<h1 class="text-center text-3xl marck-script">1: Answer</h1>
-				<h1 class="text-center text-3xl marck-script">2: See what was right or wrong</h1>
-				<h1 class="text-center text-3xl marck-script">
+				<h1 class="text-center text-3xl marck-script lg:block hidden">
+					2: See what was right or wrong
+				</h1>
+				<h1 class="text-center text-3xl marck-script lg:block hidden">
 					3: See how many were right or wrong
 				</h1>
 
 				<div class="flex justify-center">
 					<img src={SelectMockup} class="w-4/6 align-top" alt="Select answer" />
 				</div>
+				<h1 class="text-center text-3xl marck-script lg:hidden block">
+					3: See how many were right or wrong
+				</h1>
 				<div class="flex justify-center">
 					<img
 						src={SolutionMockup}
@@ -63,6 +73,9 @@
 						alt="See right and wrong solutions"
 					/>
 				</div>
+				<h1 class="text-center text-3xl marck-script lg:hidden block">
+					3: See how many were right or wrong
+				</h1>
 				<div class="flex justify-center">
 					<img
 						src={ResultsMockup}