quest hardware and mobile filter bar

Author: myogpatterns

assets/css/main.css

@@ -2407,7 +2407,7 @@ input, select, textarea {
 				background-color: var(--primary);
 			}
 
-/* ---- Button-Group ---- */
+/* ---- Filters Button-Group ---- */
 
 /* ui group */
 
@@ -2417,7 +2417,6 @@ input, select, textarea {
 
 	.ui-group .button-group {
 		display: inline-block;
-		margin-right: 1.5em;
 	}
 
 	.button-group:after {
@@ -2432,6 +2431,7 @@ input, select, textarea {
 	margin-left: 0;
 	margin-right: 1px;
 	padding: 0 2em;
+	letter-spacing: normal;
 	}
 
 	.button-group .button:first-child { border-radius: 3.75em 0 0 3.75em; }
@@ -2446,10 +2446,23 @@ input, select, textarea {
 	}
 }
 
-@media screen and (max-width: 425px) {
-	.filters {
-		display: none;
+@media screen and (max-width: 768px) {
+	.filters.wrapper.style1 > .inner {
+		padding: 2rem 2rem 0rem 2rem;
+	}
+	.ui-group {
+		display: inline-flex;
+		flex-wrap: wrap;
 	}
+
+	.button-group > .button {
+		margin: .125rem;
+		padding: 0 1rem;
+		letter-spacing: normal;
+		}
+	
+		.button-group .button:first-child { border-radius: 0; }
+		.button-group .button:last-child { border-radius: 0; }
 }
 
 /* Form */

assets/db/allproducts.json

@@ -71,6 +71,7 @@
                             <button class="button" data-filter=".Ripstop-by-the-Roll">Ripstop by the Roll</button>
                             <button class="button" data-filter=".Mozet-Supplies">Mozet Supplies</button>
                             <button class="button" data-filter=".adventurexpert">AdventurExpert</button>
+                            <button class="button" data-filter=".quest">Quest Outfitters</button>
                         </div>
                     </div> 
                 </br>
@@ -81,6 +82,7 @@
                             <button class="button" data-filter=".metal">Metal</button>
                         </div>
                     </div>
+                </br>
                     <div class="ui-group">
                         <div class="button-group" data-filter-group="kind">
                             <button class="button primary is-checked" data-filter="">Any</button>