put table for grants mgmt fit in iPad Screen

GSA · Jan 6, 2025 · 5cfc65d · 5cfc65d
1 parent e6b2e06
commit 5cfc65d
Showing 1 changed file with 67 additions and 2 deletions.
diff --git a/_pages/marketplace/marketplace.html b/_pages/marketplace/marketplace.html
@@ -122,7 +122,7 @@ <h2>FAQ</h2>
   <br><br>
   <h2 id="externally">Grants Management: Externally Shared Federal Solutions/Services</h2>
   <p style="color: black; font-weight: bold; font-size: 24px;">Externally shared federal solutions are non-mandatory, federal solutions that accept external customers. These solutions are validated by the Grants QSMO after completing our <a href="#a-2" class="marketplace-validation"> Marketplace Validation Process</a>.</p>
-  <div class="esgms-table-wrapper">
+  <div class="esgms-table-wrapper" style="overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; width: 100%; max-width: 100vw; box-sizing: border-box; padding: 8px; border: 1px solid #ccc; background-color: #fff; white-space: nowrap;">
     <table aria-label="Grants Management: Externally Shared Federal Solutions/Services">
       <thead>
         <tr>
@@ -1005,4 +1005,69 @@ <h2 id="mandatory">Grants Management: Mandatory Shared Federal Solutions/Service
   <p><b>Media Requests:</b> Please complete this <a href="https://touchpoints.app.cloud.gov/touchpoints/fdf3256e/submit" target="_blank">Grants QSMO Media Request intake form</a> to request an interview or quote from a member of the Grants QSMO team.</p>
 
 </div>
-
+
+<style>
+.esgms-table-wrapper {
+  display: block;
+  width: 100%;
+  overflow-x: hidden; 
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.esgms-table-wrapper table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  table-layout: fixed; 
+}
+
+.esgms-table-wrapper th,
+.esgms-table-wrapper td {
+  text-align: left;
+  padding: 6px;
+  border: 1px solid #ccc;
+  vertical-align: top;
+  word-wrap: break-word; 
+  white-space: normal;
+  overflow: hidden; 
+}
+
+.esgms-table-wrapper th {
+  background-color: #f5f5f5;
+  font-weight: bold;
+  text-align: center;
+}
+
+@media screen and (max-width: 1024px) {
+  .esgms-table-wrapper table {
+    font-size: 12px; 
+  }
+
+  .esgms-table-wrapper th,
+  .esgms-table-wrapper td {
+    padding: 4px; 
+  }
+
+  .esgms-table-wrapper th,
+  .esgms-table-wrapper td {
+    width: auto; 
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .esgms-table-wrapper table {
+    font-size: 10px; 
+  }
+
+  .esgms-table-wrapper th,
+  .esgms-table-wrapper td {
+    padding: 3px;
+  }
+
+  .esgms-table-wrapper th {
+    font-size: 11px; 
+  }
+}
+
+</style>