From 2d9deb00d18b646392e660dac42805ec66d3f226 Mon Sep 17 00:00:00 2001
From: Kohei Yoshino <kohei.yoshino@gmail.com>
Date: Sun, 4 Mar 2018 19:00:08 -0500
Subject: Bug 1419973 - Modify product selector layout on Browse and Enter Bug
 pages

---
 extensions/BMO/web/styles/choose_product.css | 76 ++++++++++++++++++++++++++--
 1 file changed, 73 insertions(+), 3 deletions(-)

(limited to 'extensions/BMO/web/styles')

diff --git a/extensions/BMO/web/styles/choose_product.css b/extensions/BMO/web/styles/choose_product.css
index 053af542f..bcca3428e 100644
--- a/extensions/BMO/web/styles/choose_product.css
+++ b/extensions/BMO/web/styles/choose_product.css
@@ -6,11 +6,81 @@
  * defined by the Mozilla Public License, v. 2.0. */
 
 #choose_product h2,
-#choose_product p {
-    text-align: center;
+#choose_product p,
+#guided {
+  text-align: center;
 }
 
 #choose_product td h2,
 #choose_product td p {
-    text-align: left;
+  text-align: left;
+}
+
+#product-list {
+  margin: 32px 0;
+}
+
+#product-list .tile {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin: 0 auto;
+}
+
+#product-list .tile .product {
+  overflow: hidden;
+  box-sizing: border-box;
+  margin: 16px 0;
+  padding: 0 16px 0 80px;
+}
+
+#product-list .tile .product h3 {
+  margin: 0;
+  font-size: 150%;
+}
+
+#product-list .tile .product img {
+  float: left;
+  margin: 0 0 0 -80px;
+}
+
+#product-list .tile .product p {
+  margin: 4px 0 0;
+  line-height: 1.5;
+  text-align: left;
+}
+
+#guided img {
+  vertical-align: text-bottom;
+}
+
+@media screen and (min-width: 1024px) {
+  #product-list .tile {
+    width: 960px;
+  }
+
+  #product-list .tile .product {
+    width: 50%;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  #product-list .tile {
+    width: 720px;
+  }
+
+  #product-list .tile .product {
+    width: 50%;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  #product-list .tile {
+    width: auto;
+    max-width: 480px;
+  }
+
+  #product-list .tile .product {
+    width: 100%;
+  }
 }
-- 
cgit v1.2.3-24-g4f1b