improved product arrangement for x-small screens
authorAndrew Engelbrecht <andrew@fsf.org>
Mon, 29 Jul 2019 20:06:39 +0000 (16:06 -0400)
committerAndrew Engelbrecht <andrew@fsf.org>
Mon, 29 Jul 2019 20:06:39 +0000 (16:06 -0400)
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

index 10bd6d7..34874f2 100644 (file)
@@ -180,6 +180,24 @@ a { transition: 0.3s; }
   text-align: right;
 }
 
   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 */
 
 
 /* Vendors list */