always place logos above vendor text, use columns
authorAndrew Engelbrecht <andrew@fsf.org>
Fri, 1 Nov 2019 22:55:03 +0000 (18:55 -0400)
committerAndrew Engelbrecht <andrew@fsf.org>
Fri, 1 Nov 2019 22:55:03 +0000 (18:55 -0400)
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

index 9c04a45..cc8b35e 100644 (file)
@@ -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;
 }