Bug 1419973 - Modify product selector layout on Browse and Enter Bug pages

1 files changed, 73 insertions, 3 deletions

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%;
+  }
 }