increased font sizes and fixed comments not displaying correctly

assets/css/forum-styles.css

@@ -541,17 +541,20 @@ body {
     padding: 1.2vh;
   }
 }
-@media (max-width: 768px) {
+/* Two cards per row on medium screens */
-  .minter-card {
-    flex: 1 1 calc(50% - 20px); /* Two cards per row on medium screens */
-  }
-}
 
-@media (max-width: 480px) {
+/* @media (max-width: 768px) {
   .minter-card {
-    flex: 1 1 100%; /* Full-width cards on small screens */
+    flex: 1 1 calc(50% - 20px); 
   }
-}
+} */
+/* Full-width cards on small screens */
+
+/* @media (max-width: 480px) {
+  .minter-card {
+    flex: 1 1 100%; 
+  }
+} */
 
 .minter-card {
   background-color: #1e1e2e; /* Dark background */
@@ -581,19 +584,22 @@ body {
 
 .minter-card-header h3 {
   margin: 0;
-  font-size: 1.5em;
+  font-size: 1.6em;
   color: #ffae42; /* Highlight for the header */
 }
 
 .minter-card h5 {
   margin: 0;
-  font-size: 1.0em;
+  font-size: 1.4em;
   color: lightgreen;
   text-align: center;
 }
+.minter-card p {
+  font-size: 1.12em;
+}
 
 .minter-card-header p {
-  font-size: 0.9em;
+  font-size: 1.15em;
   color: #cccccc; /* Subdued color for additional header info */
 }
 
@@ -609,7 +615,7 @@ body {
 
 .minter-card-results h5 {
   margin-bottom: 1vh;
-  font-size: 1.1vh;
+  font-size: 1.3em;
   color: lightgreen;
   text-align: center;
 }
@@ -622,7 +628,7 @@ body {
 .minter-card-results span {
   padding: 5px 10px;
   border-radius: 8px;
-  font-size: 0.9em;
+  font-size: 1.1em;
 }
 
 .minter-card-results .admin-yes {
@@ -665,7 +671,7 @@ body {
   border: 1px solid #d3d3d3; /* Light grey border */
   padding: 1rem; /* Add padding inside the section */
   margin: 1rem 0; /* Add margin outside the section for spacing */
-  font-size: 0.75em; /* Set the font size */
+  font-size: 1.1em; /* Set the font size */
   line-height: 1.5; /* Optional: Adjust line spacing for better readability */
   height: calc(1.5 * 750 / 66 * 0.8em); /* Dynamically calculate height to fit 1000 characters */
   overflow-y: auto; /* Enable vertical scrolling if content overflows */
@@ -769,6 +775,10 @@ body {
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
 }
 
+.comments {
+  font-size: 1.15em;
+}
+
 .comments-container {
   margin-bottom: 10px;
   max-height: 150px;
@@ -801,10 +811,7 @@ textarea::placeholder {
   background-color: #0055cc;
 }
 
-.minter-card p {
+
-  font-size: 12px;
-  color: gray;
-}
 
 
 

assets/js/MinterBoard.js

@@ -33,7 +33,7 @@ async function loadMinterBoardPage() {
   mainContent.innerHTML = `
     <div class="minter-board-main" style="padding: 20px; text-align: center;">
       <h1 style="color: lightblue;">Minter Board</h1>
-      <p> The Minter Board is a place to publish information about yourself in order to obtain support from existing Minters and Minter Admins on the Qortal network. You may publish a header, content, and links to other QDN-published content in order to support you in your mission. Minter Admins and Existing Minters will then support you (or not) by way of a vote on your card. Card details you publish, along with existing poll results, and comments from others, will be displayed here. Good Luck on your Qortal journey to becoming a minter!</p>
+      <p style="font-size: 1.25em;"> The Minter Board is a place to publish information about yourself in order to obtain support from existing Minters and Minter Admins on the Qortal network. You may publish a header, content, and links to other QDN-published content in order to support you in your mission. Minter Admins and Existing Minters will then support you (or not) by way of a vote on your card. Card details you publish, along with existing poll results, and comments from others, will be displayed here. Good Luck on your Qortal journey to becoming a minter!</p>
       <button id="publish-card-button" class="publish-card-button" style="margin: 20px; padding: 10px;">Publish Minter Card</button>
       <div id="cards-container" class="cards-container" style="margin-top: 20px;"></div>
       <div id="publish-card-view" class="publish-card-view" style="display: none; text-align: left; padding: 20px;">
@@ -390,9 +390,6 @@ const displayComments = async (cardIdentifier) => {
     const comments = await fetchCommentsForCard(cardIdentifier);
     const commentsContainer = document.getElementById(`comments-container-${cardIdentifier}`);
 
-    // Clear previous comments
-    commentsContainer.innerHTML = '';
-
     // Fetch and display each comment
     for (const comment of comments) {
       const commentDataResponse = await qortalRequest({
@@ -457,7 +454,6 @@ async function createCardHTML(cardData, pollResults, cardIdentifier) {
   const { adminYes = 0, adminNo = 0, minterYes = 0, minterNo = 0, totalYes = 0, totalNo = 0 } =
     calculatePollResults(pollResults, minterGroupMembers) || {};
 
-
   return `
   <div class="minter-card">
     <div class="minter-card-header">

index.html

@@ -229,7 +229,7 @@
                 </div>
                 
                 <a class="link-wrap" href="#">
-                    <p class="mbr-link mbr-fonts-style display-4">Q-Mintership v0.22beta</p>
+                    <p class="mbr-link mbr-fonts-style display-4">Q-Mintership v0.24beta</p>
                 </a>
             </div>
             <div class="col-12 col-lg-6">