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.

diff --git a/css/style.css b/css/style.css
index 10bd6d7337041399f463666f8103dc5cd098a56c..34874f2fe6224fd9c2fd5b4d28f4404c05e9fac9 100644 (file)
--- 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 */