#4 #6 Made slider rows more responsive

gerhansquad · Dec 25, 2020 · 8f10e6c · 8f10e6c
1 parent 563d63b
commit 8f10e6c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 37 deletions.
diff --git a/www/css/homepage.css b/www/css/homepage.css
@@ -78,7 +78,7 @@ body {
 .row2row2 {
 	text-transform: uppercase;
 	height: 12.5%;
-	padding-top: 2%;
+	padding-top: 0.8vh;
 }
 .row2row3 {
 	height: 33%;
@@ -133,7 +133,7 @@ body {
 
 .innerRow3 {
 	justify-content: center;
-	height: 15%;
+	height: 10vh;
 	/* border: solid 0.1px red; */
 	align-content: center;
 }
@@ -188,50 +188,28 @@ body {
 	background-color: rgb(117, 86, 101, 1);
 }
 
+.prayer-name-row {
+	justify-content: center;
+	height: 11.5%;
+	/* border: solid 0.1px red; */
+	align-content: center;
+}
+
 /******************************************************************************************************/
 /*										Slider Open state: Text and Icons							  */
 /******************************************************************************************************/
 
 /* Mandatory Prayer Text for Mobile XS */
 .prayer-name {
+	line-height: 0.8;
 	margin-bottom: 0%;
 	font-family: "Source Sans Pro", sans-serif;
-	padding: 9%;
-	padding-top: 18%;
 	padding-inline: 0% 0%;
 	text-align: center;
 	color: aliceblue;
 	font-size: 4vw;
 }
 
-/* Mobile S */
-@media only screen and (min-width: 280px) {
-	.prayer-name {
-		padding-top: 16%;
-	}
-}
-
-/* Mobile M */
-@media only screen and (min-width: 320px) {
-	.prayer-name {
-		padding-top: 12%;
-	}
-}
-
-/* Mobile L */
-@media only screen and (min-width: 375px) {
-	.prayer-name {
-		padding-top: 9%;
-	}
-}
-
-/* Mobile XL */
-@media only screen and (min-width: 410px) {
-	.prayer-name {
-		padding-top: 7%;
-	}
-}
-
 /*  Mandatory Icons */
 .mandatory-icon {
 	width: auto;

diff --git a/www/index.html b/www/index.html
@@ -77,7 +77,7 @@ <h1 id="second-prayer">minutes to Maghrib</h1>
 			<div class="row myrow3">
 				<!--Fajr-->
 				<div class="col row3col1">
-					<div class="row">
+					<div class="row prayer-name-row">
 						<h2 class="prayer-name">FAJR</h2>
 					</div>
 					<div class="row innerRow3">
@@ -92,7 +92,7 @@ <h6 class="prayer-types">Sunnah</h6>
 				</div>
 				<!--Zuhr-->
 				<div class="col row3col2">
-					<div class="row">
+					<div class="row prayer-name-row">
 						<h2 class="prayer-name">DUHR</h2>
 					</div>
 					<div class="row innerRow3">
@@ -110,7 +110,7 @@ <h6 class="prayer-types">Sunnah</h6>
 				</div>
 				<!--Asr-->
 				<div class="col row3col3">
-					<div class="row">
+					<div class="row prayer-name-row">
 						<h2 class="prayer-name">ASR</h2>
 					</div>
 					<div class="row innerRow3"></div>
@@ -122,7 +122,7 @@ <h6 class="prayer-types">Fard</h6>
 				</div>
 				<!--Maghrib-->
 				<div class="col row3col4">
-					<div class="row">
+					<div class="row prayer-name-row">
 						<h2 class="prayer-name">MAGHRIB</h2>
 					</div>
 					<div class="row innerRow3"></div>
@@ -137,7 +137,7 @@ <h6 class="prayer-types">Sunnah</h6>
 				</div>
 				<!--Isha-->
 				<div class="col row3col5">
-					<div class="row">
+					<div class="row prayer-name-row">
 						<h2 class="prayer-name">ISHA</h2>
 					</div>
 					<div class="row innerRow3"></div>