make table responsive

css/style.css

@@ -124,29 +124,32 @@
 .flickity-button {
   background: #588597;
 }
+
+/* Spells */
 .container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: stretch;
-
 }
 .list-col {
-  flex-grow: 2;
+  width: 75%;
-  min-width: 600px;
+  float: left;
 }
 .view-col {
-  flex-grow: 1;
+  width: 25%;
+  float: left;
+}
+ @media screen and (max-width: 768px) {
+  .list-col,
+  .view-col {
+    width: 100%;
+    float: none;
   }
-@media screen and (min-width: 768px) {
 
   .list-col{
-    margin-right: 1%;
+    zoom:70%
-  }
+  };
-  .view-col {
-    
-    max-width: 600px;
-  }
 } 
 
 .w2ui-grid-data {
@@ -158,5 +161,4 @@
   white-space: break-spaces;
 }
 .w2ui-grid .w2ui-grid-body table {
-
 }

js/spells.js

@@ -38,11 +38,10 @@ fetch(jsonsource)
           searchable: { operator: "contains" },
         },
         {
-          field: "desc",
+          field: "source",
-          text: "Description",
+          text: "Source",
-          size: "500%",
+          sortable: true,
-          style: "test",
+          tooltip: "Which book is this from ?",
-          resizable: true,
           searchable: { operator: "contains" },
           render(record, extra) {
             return (
@@ -52,13 +51,6 @@ fetch(jsonsource)
             );
           },
         },
-        {
-          field: "source",
-          text: "Source",
-          sortable: true,
-          tooltip: "Which book is this from ?",
-          searchable: { operator: "contains" },
-        },
         { field: "page", text: "Page", sortable: true },
         { field: "level", text: "Level", sortable: true, size: 65 },
         { field: "school", text: "School", sortable: true },