Added additional media queries to remove bleeding text issue

HackAtUCI · Oct 12, 2022 · 490c476 · 490c476
1 parent 041be48
commit 490c476
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 16 deletions.
diff --git a/src/app/views/home/sections/Intro.scss b/src/app/views/home/sections/Intro.scss
@@ -25,11 +25,9 @@
 		}
 	}
 
-	@media only screen and (max-width: $break-medium) {
+	@media only screen and (max-width: 900px) {
 		.intro .card{
-			width: auto;
-			height: auto;
-
+			width: 75vw;
 		}
 		.intro:before{
 			content: "";
@@ -44,15 +42,28 @@
 			background-position: center;
 			background-repeat: no-repeat;
 			background-size: contain;
-			transform: rotate(90deg) translate(7.5vw, 5vw);
+			transform: rotate(90deg) translate(7.5vw, 3vw);
 		}
 	}
-	@media only screen and (min-width: $break-medium) {
+	@media only screen and (min-width: 901px) {
 		.intro .card {
 			background-image: url('../../../../assets/images/scroll_light_medium.png');
 			background-position: center;
 			background-repeat: no-repeat;
 			background-size: contain;
 		}
 	}
+	@media only screen and (min-width: 901px) and (max-width: $break-medium) {
+		.mentor-information {
+			align-items: start;
+		}
+
+		.mentors .card {
+			width: 90vw;
+
+			p {
+				text-align: left;
+			}
+		}
+	}
 }
diff --git a/src/app/views/home/sections/Mentors.scss b/src/app/views/home/sections/Mentors.scss
@@ -12,6 +12,7 @@
 			width: 1200px;
 			height: 600px;
 			padding: 80px;
+			align-items: center;
 		}
 
 		& > h2 {
@@ -23,9 +24,8 @@
 			display: flex;
 			flex-direction: row;
 			justify-content: space-between;
-			align-items: center;
 
-			@media screen and (max-width: $break-medium) {
+			@media screen and (max-width: 700px) {
 				flex-direction: column;
 				align-items: center;
 			}
@@ -35,7 +35,7 @@
 				height: 18vw;
 				border-radius: 1rem;
 
-				@media screen and (max-width: $break-medium) {
+				@media screen and (max-width: 700px) {
 					width: 10rem;
 					height: 10rem;
 					margin-right: 0;
@@ -53,7 +53,7 @@
 					text-align: left;
 				}
 
-				@media screen and (max-width: $break-medium) {
+				@media screen and (max-width: 700px) {
 					margin: 2rem 0 1rem 0;
 					text-align: center;
 					align-items: center;
@@ -64,10 +64,13 @@
 			}
 		}
 	}
-	@media only screen and (max-width: $break-medium) {
+	@media only screen and (max-width: 700px) {
 		.mentors .card{
-			width: auto;
-			height: auto;
+			width: 50vw;
+
+			p, a {
+				text-align: center;
+			}
 		}
 		.mentors:before{
 			content: "";
@@ -82,16 +85,29 @@
 			background-position: center;
 			background-repeat: no-repeat;
 			background-size: contain;
-			transform: rotate(90deg) translate(7.5vw, 5vw);
+			transform: rotate(90deg) translate(7.5vw, 3vw);
 		}
 	}
-	@media only screen and (min-width: $break-medium) {
+	@media only screen and (min-width: 701px) {
 		.mentors .card {
 			background-image: url('../../../../assets/images/scroll_dark_wide.png');
 			background-position: center;
 			background-repeat: no-repeat;
 			background-size: contain;
-			padding: 150px;
+			padding: 90px 150px 150px 150px;
+		}
+	}
+	@media only screen and (min-width: 701px) and (max-width: $break-medium) {
+		.mentor-information {
+			align-items: start;
+		}
+
+		.mentors .card {
+			width: 90vw;
+
+			p {
+				text-align: left;
+			}
 		}
 	}
 }
diff --git a/src/globals/zothacks-styles.scss b/src/globals/zothacks-styles.scss
@@ -41,6 +41,9 @@ $white: #ffffff;
 $lightGray: #e8e8e8;
 $offWhite: #ededed;
 $pink: #ff8dcb;
+$brown: #5C3D0D;
+$tan: #FFE8AC;
+$black: #000000;
 
 // Animations
 @keyframes wobble {