Made footer responsive to page size

src/main/resources/static/css/footer.css

@@ -37,3 +37,24 @@
   text-decoration: none;
   cursor: pointer;
 }
+
+.footer-link-list {
+  display: flex;
+  flex-direction: row; /* Align links in a row */
+}
+
+/* Responsive styles for smaller screens */
+@media (max-width: 650px) {
+  .footer-link {
+    font-size: 0.8rem; /* Adjust font size for smaller screens */
+  }
+}
+
+@media (max-width: 550px) {
+  .footer-link {
+    font-size: 1rem; /* Adjust font size for smaller screens */
+  }
+  .footer-link-list{
+    flex-direction: column; /* Stack links vertically on smaller screens */
+  }
+}

src/main/resources/templates/fragments/footer.html

@@ -4,7 +4,7 @@
   <div class="footer-center pb-4">
     <!-- Links section -->
     <div class="d-flex justify-content-center">
-      <ul class="list-unstyled d-flex">
+      <ul class="list-unstyled footer-link-list">
         <li><a class="footer-link px-2" id="licenses" target="_blank" th:href="@{'/licenses'}" th:text="#{licenses.nav}">Licenses</a></li>
         <li><a class="footer-link px-2" id="releases" target="_blank" th:href="@{'/releases'}" th:text="#{releases.footer}">Releases</a></li>
         <li><a class="footer-link px-2" id="survey" target="_blank" href="https://stirlingpdf.info/s/cm28y3niq000o56dv7liv8wsu" th:text="#{survey.nav}">Survey</a></li>