#4 Made borders responsive

gerhansquad · Dec 25, 2020 · 66044d9 · 66044d9
1 parent 8f10e6c
commit 66044d9
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git a/www/css/homepage.css b/www/css/homepage.css
@@ -138,25 +138,25 @@ body {
 	align-content: center;
 }
 
-.row3col2,
-.row3col3,
-.row3col4 {
-	border-right: solid 1px;
-	border-left: solid 1px;
-	border-color: aliceblue;
-}
-
 .row3col1,
 .row3col2,
 .row3col3,
 .row3col4,
 .row3col5 {
-	border-top: solid aliceblue 2px;
+	border-top: solid aliceblue 0.35vw;
 	position: relative;
 	top: 88%;
 	min-width: 5%;
 }
 
+.row3col2,
+.row3col3,
+.row3col4 {
+	border-right: solid 0.3vw;
+	border-left: solid 0.3vw;
+	border-color: aliceblue;
+}
+
 .row3col1,
 .row3col5 {
 	border-color: aliceblue;
@@ -169,6 +169,13 @@ body {
 	background-color: rgb(26, 31, 50, 1);
 }
 
+.row3col5 {
+	border-right: solid 0px;
+	border-left: solid 1px;
+	border-color: aliceblue;
+	background-color: rgb(117, 86, 101, 1);
+}
+
 .row3col2 {
 	background-color: rgb(48, 49, 70, 1);
 }
@@ -181,13 +188,6 @@ body {
 	background-color: rgba(84, 71, 91, 1);
 }
 
-.row3col5 {
-	border-right: solid 0px;
-	border-left: solid 1px;
-	border-color: aliceblue;
-	background-color: rgb(117, 86, 101, 1);
-}
-
 .prayer-name-row {
 	justify-content: center;
 	height: 11.5%;

diff --git a/www/index.html b/www/index.html
@@ -80,6 +80,7 @@ <h1 id="second-prayer">minutes to Maghrib</h1>
 					<div class="row prayer-name-row">
 						<h2 class="prayer-name">FAJR</h2>
 					</div>
+					<div class="row innerRow3"></div>
 					<div class="row innerRow3">
 						<img class="mandatory-icon" src="img/man-praying-filled.png" alt="empty-man" />
 						<h6 class="prayer-types">Fard</h6>
@@ -88,7 +89,6 @@ <h6 class="prayer-types">Fard</h6>
 						<img class="mandatory-icon" src="img/man-praying.png" alt="empty-man" />
 						<h6 class="prayer-types">Sunnah</h6>
 					</div>
-					<div class="row innerRow3"></div>
 				</div>
 				<!--Zuhr-->
 				<div class="col row3col2">