Woocommerce product image gallery thumbnails layout/placement

[SSE]

Hi you wise people!
Thank you for supporting the new Woocommerce gallery, it gives me all that I need for gallery.
I managed to make some customization to my gallery (magnifier look, thumbnails size & place & opacity & borders), but at the same time must have done something wrong, since now the thumbnails are not lining up properly. First thumbnail of the row 2 does not look good. I added screenshot to show that. How can I make thumbnails work correctly?

Here is also the code I used to edit the gallery.

/* WooCommerce 3.0 Gallery */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: .875em;
right: .875em;
display: block;
height: 2em;
width: 2em;
border-radius: 3px;
z-index: 99;
text-align: center;
text-indent: -999px;
overflow: hidden;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
background-color: #BABABA;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #000000;
border-color: #1781ae;
color: #ffffff;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger:before {
font: normal normal normal 1em/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: block;
content: “\f00e”;
line-height: 2;
text-indent: 0;
}

/product gallery thumbnails under main picture/
.single-product .flex-control-nav {
position: static;
}

.single-product .flex-control-nav li {
float: left;
box-shadow: none;
border:0.5px solid #F8F8F8;
}

.flex-control-nav.flex-control-thumbs {
position: relative;
}

.flex-control-nav.flex-control-thumbs img {
width: auto;
height: 100px;
vertical-align: top;
transition: opacity 0.3s ease;
cursor: pointer;
}

.woocommerce-product-gallery__trigger img {
opacity: 0;
}

.flex-control-nav.flex-control-thumbs img:not(:hover):not(.flex-active) {
opacity: 1;
}

Could you help me with this? Thank you.

[lely]

Hi There,

Thank you for those information. Although we still need your site URL so we can inspect why it is behaving that way and not aligning properly. You can share it using a secure note if you don’t want it to be public.

[SSE]

Hi Lely, thank you. I will add a secure note.

[lely]

Hi There,

Thank you for the credentials. Please add this custom CSS too:

 .flex-control-nav.flex-control-thumbs li:nth-child(5) {
    margin-left: 0;
 }

Just to explain what happened here, I can see you have the following CSS that add left margin on all thumbnails excerpt the first one so there will be space between those images:

  .flex-control-nav.flex-control-thumbs li:not(:first-child) {
     margin-left: 0.5em;
  }

The 5th thumbnail is not the first so that CSS where it is checking not first child will return true. Since by display we don’t need the margin, we add those CSS that will override that setup.

Hope this helps.

[SSE]

Thank you very much Lely! You were kind to explain it to me too. That worked fine.
Second row thumbnails were also very close to first one and I fixed it by adding margin-top to the code you gave me. Is there any code to do that to all thumbnails after first row? I noticed that it worked fine when I copied this code and changed the number “li:nth-child(5)”, but is it the best way?

.flex-control-nav.flex-control-thumbs li:nth-child(5) {
margin-left: 0;
margin-top:0.5em;
}

Thank you very much.
Have a nice day!

[lely]

Hi There,

You’re always welcome! Yes, what you did was correct. Upon checking, all those custom CSS is working fine on desktop, just note that it is not responsive. On smaller screen size you can see the issue. It is recommended now, to adjust the same CSS on screensize. Those custom CSS is working fine from 630px and up. So what you need right now is something like this:

 @media (max-width:630px){
   .flex-control-nav.flex-control-thumbs img {
      height: 80px !important;
   }  
   /*Insert all other CSS that needs adjustment here on 630px and below screensize*/
 }
 @media (max-width: 480px){ /*This is another instance in case you want it different for much smaller screen size*/
   .flex-control-nav.flex-control-thumbs img {
      height: 50px !important;
   }  
   /*Insert all other CSS that needs adjustment here on 630px and below screensize*/
 }

Hope this helps.