From 96a365f2ab1531517105bc4eb36d51df9ac4adde Mon Sep 17 00:00:00 2001
From: Andrew Engelbrecht <andrew@fsf.org>
Date: Fri, 1 Nov 2019 18:55:03 -0400
Subject: [PATCH] always place logos above vendor text, use columns

now vendor logos are above vendor descriptions at all screen sizes. the
same goes for use of columns. on large screens, three vendor teasers
appear side by side.

images and details are vertically aligned.
---
 css/style.css | 90 ++++++++++++++-------------------------------------
 1 file changed, 24 insertions(+), 66 deletions(-)

diff --git a/css/style.css b/css/style.css
index 9c04a45..cc8b35e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -427,80 +427,38 @@ nav .search-block-form {
   overflow: auto;
 }
 
-@media screen and (max-width: 767px) {
-  .vendors-list-row {
-    margin: 0px auto;
-  }
-
-  .vendors-list {
-    margin-bottom: 40px;
-    list-style: none;
-
-    overflow: auto;
-  }
-
-  .vendors-list .views-field-field-icon {
-    width: 220px;
-
-    margin: 0px auto 20px auto;
-  }
-
-  .vendors-list .views-field-field-icon img {
-    margin: 0 auto;
-  }
-
-  .vendors-list .views-field-name,
-  .vendors-list .views-field-field-description-summary,
-  .vendors-list .views-field-description__value {
-    max-width: 300px;
-    margin: 0 auto 10px auto;
-  }
-
-  .vendors-list .views-field-name {
-    font-weight: bold;
-    font-size: 18px;
-    text-align: center;
-  }
+.vendors-list {
+  margin-bottom: 40px;
+  list-style: none;
 
+  overflow: auto;
 }
 
-@media screen and (min-width: 768px) {
-  .vendors-list-row {
-    width: 600px;
-    margin: 0px auto;
-  }
-
-  .vendors-list {
-    list-style: none;
-    clear: left;
-
-    overflow: auto;
-  }
-
-  .vendors-list .views-field-field-icon {
-    width: 220px;
-    height: 220px;
+.vendors-list .views-field-field-icon {
+  width: 220px;
+  height: 220px;
 
-    margin-bottom: 40px;
+  display: flex;
+  align-items: center;
 
-    float: left;
-  }
+  margin: 0px auto 20px auto;
+}
 
-  .vendors-list .views-field-field-icon img {
-    margin: 0 auto;
-  }
+.vendors-list .views-field-field-icon img {
+  margin: 0 auto;
+}
 
-  .vendors-list .views-field-name,
-  .vendors-list .views-field-field-description-summary,
-  .vendors-list .views-field-description__value {
-    margin-left: 300px;
-  }
+.vendors-list .views-field-name,
+.vendors-list .views-field-field-description-summary,
+.vendors-list .views-field-description__value {
+  max-width: 300px;
+  margin: 0 auto 10px auto;
+}
 
-  .vendors-list .views-field-name {
-    margin-bottom: 10px;
-    font-weight: bold;
-    font-size: 18px;
-  }
+.vendors-list .views-field-name {
+  font-weight: bold;
+  font-size: 18px;
+  text-align: center;
 }
 
 
-- 
2.25.1