switched the html table view to css flexbox. now it turns into 2 rows if the screen is big enough.

css/brands.css

@@ -44,6 +44,7 @@ button {
   white-space: wrap;
   border-radius: 8px;
   cursor: pointer;
+  margin: 0.3rem;
 }
 button:hover,
 .button:focus {

css/normalize.css

@@ -425,3 +425,9 @@ td,
 th {
   padding: 0;
 }
+
+.all-link-buttons {
+  display: inline-flex;
+  flex-flow: wrap;
+  justify-content: center;
+}

css/skeleton-light.css

@@ -126,9 +126,6 @@ pre > code {
 
 /* Spacing
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-button,
-.button {
-  margin-bottom: 1rem; }
 input,
 textarea,
 select,

index.html

@@ -102,13 +102,7 @@
           3.) alt="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers. 
 
         -->
-          <table>
+          <div class="all-link-buttons">
-            <tr>
-              <th class="spacing tab-col">JODC</th>
-              <th class="tab-col">OSDC</th>
-            </tr>
-            <tr>
-              <td class="spacing">
                 <!-- Github -->
                 <a
                   class="button button-github"
@@ -164,8 +158,7 @@
                   />Telegram</a
                 >
                 <br />
-              </td>
+
-              <td>
                 <!-- Github -->
                 <a
                   class="button button-github"
@@ -221,9 +214,6 @@
                   />Telegram</a
                 >
                 <br />
-              </td>
-            </tr>
-          </table>
           <br />
 
           <br />
@@ -236,6 +226,8 @@
             ❤️.
           </p>
         </div>
+
+        </div>
       </div>
     </div>