Fixed quick thumb img alignment issue

WPDevelopers · Sep 9, 2024 · 87c3d2e · 87c3d2e
1 parent 78d059e
commit 87c3d2e
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 10 deletions.
diff --git a/assets/front-end/css/view/quick-view.css b/assets/front-end/css/view/quick-view.css
@@ -161,14 +161,38 @@
 .eael-product-popup.woocommerce div.product div.images .flex-control-thumbs li:nth-child(4n) {
   margin-right: 0;
 }
-.eael-product-popup.woocommerce div.product div.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
+.eael-product-popup.woocommerce div.product div.woocommerce-product-gallery--columns-4 .flex-control-thumbs li,
+.eael-product-popup.woocommerce div.product div.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
   width: calc(25% - 0.75em);
   margin-right: 1em;
   margin-bottom: 1em;
 }
-.eael-product-popup.woocommerce div.product div.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:last-child {
+.eael-product-popup.woocommerce div.product div.woocommerce-product-gallery--columns-4 .flex-control-thumbs li img,
+.eael-product-popup.woocommerce div.product div.woocommerce-product-gallery--columns-5 .flex-control-thumbs li img {
+  cursor: pointer;
+  opacity: 0.5;
+}
+.eael-product-popup.woocommerce div.product div.woocommerce-product-gallery--columns-4 .flex-control-thumbs li img:hover,
+.eael-product-popup.woocommerce div.product div.woocommerce-product-gallery--columns-5 .flex-control-thumbs li img:hover {
+  opacity: 1;
+}
+.eael-product-popup.woocommerce div.product div.woocommerce-product-gallery--columns-4 .flex-control-thumbs li img.flex-active,
+.eael-product-popup.woocommerce div.product div.woocommerce-product-gallery--columns-5 .flex-control-thumbs li img.flex-active {
+  opacity: 1;
+}
+.eael-product-popup.woocommerce div.product div.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:last-child,
+.eael-product-popup.woocommerce div.product div.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:last-child {
   margin-right: 0;
 }
+.eael-product-popup.woocommerce div.product div.woocommerce-product-gallery--columns-4 ol.flex-control-thumbs,
+.eael-product-popup.woocommerce div.product div.woocommerce-product-gallery--columns-5 ol.flex-control-thumbs {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
 .eael-product-popup.woocommerce div.product .product_title {
   font-size: 28px;
   line-height: 1.2em;