Patch For Mobile View

talview · Jul 5, 2024 · 1e64f87 · 1e64f87
1 parent c03a43e
commit 1e64f87
Showing 1 changed file with 29 additions and 35 deletions.
diff --git a/index.html b/index.html
@@ -298,6 +298,7 @@
 			width: 100%;
 			border-radius: 8px;
 			padding-top: 44px;
+			padding-bottom:10px;
 
 
 		}
@@ -307,7 +308,7 @@
 			gap: 24px;
 			top:10%;
 			justify-content: center;
-			margin-bottom: 20px;
+			width: 100%;
 		}
 
 
@@ -390,26 +391,15 @@
 			flex-direction: column;
 			gap: 20px;
 			align-items: center; 
-			padding-top: 43px;
-		}
-
-		div.testArea {
-			display: flex;
-			width: 248px;
-			padding: 24px 33px 24px 24px;
-			flex-direction: column;
-			align-items: flex-start;
-			gap: 12px;
-
-			border-radius: 16px;
-			border: 1px solid var(--Monochrome-Grey-7, #D1D5DB);
-			background: var(--Monochrome-White, #FFF);
+			padding: 43px 20px 0 20px;
+			width: 100%;
 
 		}
 
-		div.testArea2 {
+		div.testArea, div.testArea2 {
 			display: flex;
-			width: 248px;
+			width:100%;
+			width: 250px;
 			padding: 24px 33px 24px 24px;
 			flex-direction: column;
 			align-items: flex-start;
@@ -419,7 +409,7 @@
 			border: 1px solid var(--Monochrome-Grey-7, #D1D5DB);
 			background: var(--Monochrome-White, #FFF);
 
-
+			
 
 		}
 
@@ -474,6 +464,7 @@
 		}
 
 		#shareArea {
+			padding-top: 20px;
 			width: 95%;
 			max-width: 40em;
 			margin: 0 auto;
@@ -498,24 +489,27 @@
 
         }
 
-        @media (max-width: 614px) {
-            .testArea,
-            .testArea2 {
-                width: 100% !important;
-                padding: 12px !important;
-                border-radius: 8px !important;
-                gap: 6px !important;
-            }
-
-            .title-class {
-                font-size: 24px !important;
-            }
+        @media (max-width: 750px) {
+			.container .testArea,
+			.container .testArea2 {
+				max-width: 150px;
+				padding: 12px;
+				border-radius: 8px;
+				gap: 6px;
+			}
+			.container .title-class {
+				font-size: 24px;
+			}
+			.container {
+				padding: 10px;
+			}
+		}
 
-            .container {
-                padding: 10px !important;
-            }
-            
-        }
+		@media (max-height: 620px){
+			.child-container{
+				height:auto;
+			}
+		}
 	</style>
 
 	<title>Talview Speedtest</title>