From e3fe14a1c5c48951d376f285bb652472d5397eb0 Mon Sep 17 00:00:00 2001
From: Andrew Engelbrecht <andrew@fsf.org>
Date: Mon, 29 Jul 2019 16:06:39 -0400
Subject: [PATCH] improved product arrangement for x-small screens

bootstrap's xs screen size is quite wide compared to our smallest screen
width, so i allowed for more columns at the wider end, and at the
smaller end, made columns narrow with space on both sides. at the
smallest end, columns fill the width of the page.
---
 css/style.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/css/style.css b/css/style.css
index 10bd6d7..34874f2 100644
--- a/css/style.css
+++ b/css/style.css
@@ -180,6 +180,24 @@ a { transition: 0.3s; }
   text-align: right;
 }
 
+@media screen and (min-width: 450px) and (max-width: 659px) {
+  .ryf-list {
+    max-width: 300px;
+    float: none;
+    margin: 0 auto;
+  }
+}
+@media screen and (min-width: 660px) and (max-width: 767px) {
+  .ryf-list-row {
+    margin: 0 auto;
+    max-width: 660px;
+  }
+  .ryf-list {
+    max-width: 300px;
+    float: left;
+  }
+}
+
 
 /* Vendors list */
 
-- 
2.25.1