Update main.css

assets/css/main.css

@@ -52,7 +52,6 @@
 
 
 	/* Footer styling */
-
 	.site-footer {
 	  background: #f2f2f2; /* Light grey background */
 	  padding: 20px 0; /* Padding around the footer content */
@@ -63,45 +62,59 @@
 	  justify-content: space-between; /* Aligns children with space between */
 	  align-items: center; /* Align items vertically */
 	  flex-wrap: wrap; /* Allows items to wrap on smaller screens */
+	  padding: 0 20px;
 	}
 
-	.university-logos,
-	.funder-logos,
-	.contact-information {
+	/* Style sections with equal flex-basis */
+	.university-logos, .contact-information, .funder-logos {
 	  flex-basis: 30%; /* Gives each section a base width */
 	  display: flex;
-	  justify-content: center; /* Center logos within their section */
-	  align-items: center; /* Align logos vertically */
-	  margin-bottom: 20px; /* Space below the logo sections */
+	  justify-content: center; /* Center the items horizontally */
+	  align-items: center; /* Align the items vertically */
+	  margin: 0 10px; /* Provides margin on the left and right */
 	}
 
-	.university-logos {
-	  justify-content: flex-start; /* Aligns university logos to the left */
+	/* Adjust the logos' sizes */
+	.university-logos img, .funder-logos img {
+	  max-height: 80px; /* Sets a maximum height for all logos */
+	  width: auto; /* Keeps the width proportional to the height */
+	  object-fit: contain; /* Prevents images from stretching */
 	}
 
-	.funder-logos {
-	  justify-content: flex-end; /* Aligns funder logos to the right */
+	/* Responsive adjustments */
+	@media (max-width: 768px) {
+	  .university-logos img, .funder-logos img {
+	    margin: 0 5px; /* Adjusts spacing for tablets */
+	  }
 	}
 
-	/* Adjust the image heights as necessary */
-	.university-logos img,
-	.funder-logos img {
-	  height: 80px; /* This sets a uniform height for all logos */
-	  width: auto; /* This keeps the width proportional to the height */
-	  object-fit: contain; /* Prevents images from being stretched */
+	@media (max-width: 480px) {
+	  .footer-container {
+	    padding: 0 10px;
+	  }
+
+	  .university-logos, .contact-information, .funder-logos {
+	    flex-basis: 100%; /* Each section takes full width on small screens */
+	    margin: 10px 0; /* Adds vertical margin */
+	  }
+
+	  .university-logos img, .funder-logos img {
+	    max-height: 60px; /* Smaller logos for mobile devices */
+	    margin: 0 2px; /* Smaller margins for mobile devices */
+	  }
 	}
 
+	/* Center contact information and style link */
 	.contact-information {
 	  text-align: center; /* Centers the contact information */
-	  margin-bottom: 20px; /* Space below the contact information */
+	  margin: 0 20px; /* Adds margin if needed */
 	}
 
 	.contact-information a {
-	  color: #333; /* Dark text color for contrast */
+	  color: #333;
 	  text-decoration: underline; /* Underlines the email link */
-	  cursor: pointer; /* Changes cursor to the pointer hand */
 	}
-	
+
 
 /* Box Model */