Merge remote-tracking branch 'bmo/master'

1 files changed, 20 insertions, 1 deletions

diff --git a/extensions/BMO/web/styles/choose_product.css b/extensions/BMO/web/styles/choose_product.css
index bcca3428e..a4ecf749f 100644
--- a/extensions/BMO/web/styles/choose_product.css
+++ b/extensions/BMO/web/styles/choose_product.css
@@ -16,6 +16,22 @@
   text-align: left;
 }
 
+#frequent-components ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 8px auto;
+  padding: 0;
+  list-style-type: none;
+  white-space: nowrap;
+}
+
+#frequent-components li {
+  flex: none;
+  margin: 8px 16px;
+  padding: 0;
+}
+
 #product-list {
   margin: 32px 0;
 }
@@ -23,7 +39,7 @@
 #product-list .tile {
   display: flex;
   flex-wrap: wrap;
-  justify-content: flex-start;
+  justify-content: center;
   margin: 0 auto;
 }
 
@@ -55,6 +71,7 @@
 }
 
 @media screen and (min-width: 1024px) {
+  #frequent-components ul,
   #product-list .tile {
     width: 960px;
   }
@@ -65,6 +82,7 @@
 }
 
 @media screen and (min-width: 768px) and (max-width: 1023px) {
+  #frequent-components ul,
   #product-list .tile {
     width: 720px;
   }
@@ -75,6 +93,7 @@
 }
 
 @media screen and (max-width: 767px) {
+  #frequent-components ul,
   #product-list .tile {
     width: auto;
     max-width: 480px;