From: Andrew Engelbrecht <andrew@fsf.org>
Date: Mon, 29 Jul 2019 20:06:39 +0000 (-0400)
Subject: improved product arrangement for x-small screens
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=e3fe14a1c5c48951d376f285bb652472d5397eb0;p=ryf-theme.git

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 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 */