make table responsive

css/style.css

@@ -123,32 +123,35 @@
 }
 .flickity-button {
   background: #588597;
-  }
+}
+
+/* Spells */
 .container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: stretch;
-
 }
-.list-col{
+.list-col {
-  flex-grow: 2;
+  width: 75%;
-  min-width: 600px;
+  float: left;
-} 
+}
 .view-col {
-  flex-grow: 1;
+  width: 25%;
+  float: left;
 }
-@media screen and (min-width: 768px) {
+ @media screen and (max-width: 768px) {
-    
+  .list-col,
-  .list-col {
-    margin-right: 1%;
-  }
   .view-col {
-    
+    width: 100%;
-    max-width: 600px;
+    float: none;
   }
-}
+
-  
+  .list-col{
+    zoom:70%
+  };
+} 
+
 .w2ui-grid-data {
   color: black;
   word-wrap: normal;
@@ -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 },