Update Achievements.css

Achievements Page- Mobile Compatible. Mozilla-Campus-Club-Cummins#33
krishprav · Oct 25, 2023 · 1d5eaf8 · 1d5eaf8
1 parent 9b832b2
commit 1d5eaf8
Showing 1 changed file with 10 additions and 7 deletions.
diff --git a/css/Achievements.css b/css/Achievements.css
@@ -1,5 +1,7 @@
 /* Set background color */
-
+body {
+  background-color: #f4f4f4;
+}
 
   /* Style for top logo */
   #top-left {
@@ -38,9 +40,9 @@
 
   /* Style for blocks */
   .block {
-	width: 30%;
-	height: 500px;
-	margin: 20px;
+	width: 90%;
+	height: auto;
+	margin: 20px auto;
 	display: inline-block;
 	background-color: #3b67ad; /* blue */
 	color: #fff; /* white */
@@ -79,7 +81,7 @@
   /* container divs for the first row of blocks */
   .row1 {
 	display: flex;
-	justify-content: space-between;
+	flex-direction: column;
 	align-items: center;
 	background-color: #222020;
 	padding: 20px;
@@ -89,7 +91,7 @@
   /* container divs for the second row of blocks */
   .row2 {
 	display: flex;
-	justify-content: space-between;
+	flex-direction: column;
 	align-items: center;
 	background-color: #222020;
 	padding: 20px;
@@ -98,14 +100,15 @@
 
   /* individual block divs */
   .block {
-	width: 30%;
+	width:auto;
 	background-color: #1d5765;
 	padding: 20px;
 	color: white;
 	text-align: center;
 	font-size: 18px;
 	border-radius: 20px;
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+	margin-bottom:1em; 
   }
 
   .block h2{