CSS for my woocommerce thumbnails?

Support
#1

I have a ton of CSS in my global css that appears to be for my woo commerce thumbnails. They used to appear as square - not squashed and on 2 to 3 Rows beneath the main product image as needed. During the last couple of updates they have become more and more squashed. They have always been set to be square. I fear some of this code is redundant and would like to get the product pages back to looking normal-
this is the css code that seems to govern the product thumbnails: (there may be more- so much has been added at various times according to Themcos directions that I don’t know what’s good/bad or indfferent - again thanks for your help

.flex-control-nav.flex-control-thumbs li {
background-color: white;
box-shadow: none;
flex: 0 1 calc(25% - 10px);
margin: 0 10px 0 0;
}

.flex-control-nav.flex-control-thumbs img {
width: 100%;
height: auto;
}

.flex-control-nav.flex-control-thumbs {
padding: 0;
margin-top: 10px;
}

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

@media screen and (min-width: 767px) {
.flex-control-nav.flex-control-thumbs li {
flex: 1 1 0 !important;
}
}

/* woodcommerce product page layout - end */

.single-product .flex-control-nav {
position: static;
float: left;
}

.flex-control-nav.flex-control-thumbs img {

width: auto;
height: 8em;

}

You guys have also provided me with this:

@media screen and (min-width: 767px) {
.flex-control-nav.flex-control-thumbs li {
flex: 1 1 0 !important;
}
}

Can you please let me know if I need to get rid of some of the other code?

#2

Hi @cdbehrle,

Thank you for reaching out to us. Try removing the following code from your global CSS:

@media screen and (min-width: 767px) {
    .flex-control-nav.flex-control-thumbs li {
        flex:1 1 0 !important;
    }
}
.flex-control-nav.flex-control-thumbs li {
    background-color: white;
    box-shadow: none;
    flex: 0 1 calc(25% - 10px);
    margin: 0 10px 0 0;
}

Let us know how this goes!

#3

It did change something in the display, (there is a half tone grey overlay on hove now ) but still squashed on one row - It may also show more images squashed in the row- kinda subtle
Just in case I am going to send you the complete global css- it may be a mess - there is years of accumulation here.

div.entry-featured div.entry-cover div.entry-cover-content span{
display:none;
}

div.entry-content.excerpt{display:none!important}

.x-topbar .p-info, .x-topbar .p-info a, .x-topbar .x-social-global a {
font-size: 14px !important;
}

h1.h-custom-headline.center-text.h1.accent{
color: black;
}

@media screen and (min-width: 767px) {
.flex-control-nav.flex-control-thumbs li {
flex: 1 1 0 !important;
}
}

.sku_wrapper {
display: none;
}

.x-btn-navbar {
margin-bottom: 20px;
width: 75%;
}

li.product .entry-wrap .entry-header {
text-align: center;
opacity: 1;
}

li.product:hover .entry-wrap .entry-header {
text-align: center;
opacity: 1;
}

.woocommerce .price > .amount, .eacs-product-carousel.eacs-product-overlay .woocommerce li.product .entry-header .price > .amount, .woocommerce li.product .entry-header .price>ins>.amount {
color: #999!important;
}

.woocommerce li.product, .woocommerce-page li.product{
margin-bottom: 40px;
}

.x-landmark {
padding-right: 0;
}

.h-landmark {
text-align: center;
}

.x-header-landmark {
padding: 20px;
font-family: Arial, serif;
letter-spacing: 5px;
}

.posted_in {
display: none;
}

.entry-featured {
border: none;
}

.entry-wrap .entry-header {
text-align: center;
}

.woocommerce .entry-content:first-child {
background: #ffffff;
}

@media screen and (min-width: 767px){

.woocommerce div.product .images {
padding: 40px;
width: 600px;
}

.woocommerce div.product .summary {
width: calc(100% - 600px);
padding: 40px 40px 40px 0;
}

.flex-control-nav {
position: relative;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}

.flex-control-nav.flex-control-thumbs {
margin-top: 20px;
padding: 0;
}

.woocommerce-product-gallery__image.flex-active-slide {
height: 600px;
}

.woocommerce-product-gallery__image.flex-active-slide .attachment-shop_single {
width: 100%;
}
.woocommerce li.product .entry-header .price>ins>.amount {
color: #999;
}
li.product .entry-wrap .entry-header {
opacity: 1;
}
.woocommerce .onsale {
color: #fff !important;
}
.woocommerce .onsale{
background-color: #999;
}
li.product .entry-featured {
border: 2px solid #eee;
padding: 6px;
}

/* woodcommerce product page layout - start */
.single-product .images img {
width: 100%;
margin: 0;
}

.flex-control-nav {
position: relative;
display: flex;
flex-wrap: wrap;
}

.flex-control-nav.flex-control-thumbs img {
width: 100%;
height: auto;
}

.flex-control-nav.flex-control-thumbs {
padding: 0;
margin-top: 10px;
}

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

/* woodcommerce product page layout - end */

.single-product .flex-control-nav {
position: static;
float: left;
}

.flex-control-nav.flex-control-thumbs img {

width: auto;
height: 8em;

}
.x-iso-container>.hentry {
padding: 6px;
}

.x-iso-container-posts.cols-3 .entry-wrap{
padding: 3% 4% 4%;
}

.single-post header.x-header-landmark {
display: none;
}

.single-post .entry-featured {
display:none;
}

.product_meta +div>p:first-child {
display: none;
}

.single-post .category-collections .entry-title {
display: none;
}

input.wpcf7-form-control.wpcf7-submit{
width: 100%;
}

.single_add_to_cart_button {
float: right;
width: 100%;
}

.woocommerce .upsells, .woocommerce .related, .woocommerce .cross-sells, .woocommerce-page .upsells, .woocommerce-page .related, .woocommerce-page .cross-sells {
margin-bottom: -3%;
}

.pp_gallery li {
display: none;
}

.woocommerce-page .x-pagination {
clear: both;
margin-top: 0;
}
.woocommerce-page .x-pagination a {background-color: #4c4c4c;}
.woocommerce-page .x-pagination a:hover {background-color: #000;}

.x-portfolio .entry-info {
width: 100%;
}

.x-portfolio .entry-extra {
width: 100%;
margin-top: 10px;
}
.single-x-portfolio .x-entry-share {
display: none;

}
.x-column ul.products {
text-align: center;
margin: 0px;
}
.x-column ul.products .product {
float: none;
display: inline block;

}
/remove border around links and buttons in Firefox/
a:focus,
a.x-btn:focus,
select:focus,
input[type=“file”]:focus,
input[type=“radio”]:focus,
input[type=“submit”]:focus,
input[type=“checkbox”]:focus,
input[type=“button”]:focus {
outline: none;
}

#4

Hello @cdbehrle,

There is an @media block that is unclosed in your code. We will have to remove it first and update your code into this:

div.entry-featured div.entry-cover div.entry-cover-content span{
  display:none;
}

div.entry-content.excerpt{
  display:none!important;
}

.x-topbar .p-info, .x-topbar .p-info a, .x-topbar .x-social-global a {
  font-size: 14px !important;
}

h1.h-custom-headline.center-text.h1.accent{
  color: black;
}

@media screen and (min-width: 767px) {
  .flex-control-nav.flex-control-thumbs li {
    flex: 1 1 0 !important;
  }
}

.sku_wrapper {
  display: none;
}

.x-btn-navbar {
  margin-bottom: 20px;
  width: 75%;
}

li.product .entry-wrap .entry-header {
  text-align: center;
  opacity: 1;
}

li.product:hover .entry-wrap .entry-header {
  text-align: center;
  opacity: 1;
}

.woocommerce .price > .amount, 
.eacs-product-carousel.eacs-product-overlay .woocommerce li.product .entry-header .price > .amount, 
.woocommerce li.product .entry-header .price>ins>.amount {
  color: #999!important;
}

.woocommerce li.product, .woocommerce-page li.product{
  margin-bottom: 40px;
}

.x-landmark {
  padding-right: 0;
}

.h-landmark {
  text-align: center;
}

.x-header-landmark {
  padding: 20px;
  font-family: Arial, serif;
  letter-spacing: 5px;
}

.posted_in {
  display: none;
}

.entry-featured {
  border: none;
}

.entry-wrap .entry-header {
  text-align: center;
}

.woocommerce .entry-content:first-child {
  background: #ffffff;
}

.woocommerce div.product .images {
  padding: 40px;
  width: 600px;
}

.woocommerce div.product .summary {
  width: calc(100% - 600px);
  padding: 40px 40px 40px 0;
}

.flex-control-nav {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-control-nav.flex-control-thumbs {
  margin-top: 20px;
  padding: 0;
}

.woocommerce-product-gallery__image.flex-active-slide {
  height: 600px;
}

.woocommerce-product-gallery__image.flex-active-slide .attachment-shop_single {
  width: 100%;
}

.woocommerce li.product .entry-header .price>ins>.amount {
  color: #999;
}

li.product .entry-wrap .entry-header {
  opacity: 1;
}

.woocommerce .onsale {
  color: #fff !important;
}

.woocommerce .onsale{
  background-color: #999;
}

li.product .entry-featured {
  border: 2px solid #eee;
  padding: 6px;
}

/* woodcommerce product page layout - start */
.single-product .images img {
  width: 100%;
  margin: 0;
}

.flex-control-nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.flex-control-nav.flex-control-thumbs img {
  width: 100%;
  height: auto;
}

.flex-control-nav.flex-control-thumbs {
  padding: 0;
  margin-top: 10px;
}

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

/* woodcommerce product page layout - end */
.single-product .flex-control-nav {
  position: static;
  float: left;
}

.flex-control-nav.flex-control-thumbs img {
  width: auto;
  height: 8em;
}

.x-iso-container>.hentry {
  padding: 6px;
}

.x-iso-container-posts.cols-3 .entry-wrap{
  padding: 3% 4% 4%;
}

.single-post header.x-header-landmark {
  display: none;
}

.single-post .entry-featured {
  display:none;
}

.product_meta +div>p:first-child {
  display: none;
}

.single-post .category-collections .entry-title {
  display: none;
}

input.wpcf7-form-control.wpcf7-submit{
  width: 100%;
}

.single_add_to_cart_button {
  float: right;
  width: 100%;
}

.woocommerce .upsells, .woocommerce .related, 
.woocommerce .cross-sells, .woocommerce-page .upsells, 
.woocommerce-page .related, .woocommerce-page .cross-sells {
  margin-bottom: -3%;
}

.pp_gallery li {
  display: none;
}

.woocommerce-page .x-pagination {
  clear: both;
  margin-top: 0;
}

.woocommerce-page .x-pagination a {
  background-color: #4c4c4c;
}

.woocommerce-page .x-pagination a:hover {
  background-color: #000;
}

.x-portfolio .entry-info {
  width: 100%;
}

.x-portfolio .entry-extra {
  width: 100%;
  margin-top: 10px;
}

.single-x-portfolio .x-entry-share {
  display: none;
}

.x-column ul.products {
  text-align: center;
  margin: 0px;
}

.x-column ul.products .product {
  float: none;
  display: inline block;
}

/*remove border around links and buttons in Firefox*/
a:focus,
a.x-btn:focus,
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="submit"]:focus,
input[type="checkbox"]:focus,
input[type="button"]:focus {
  outline: none;
}

Please check out your site again.

#5

Thank You Nabeel- that works on products that have only 4 thumbnails.

Is there away to make more than 4 thumbnails display in 2 or more rows? beneath the main image?

Thank You

#6

Hello @cdbehrle,

Please add this custom css:

@media(max-width: 979px){
  .woocommerce div.product .summary {
    width: 100%;
    padding: 40px 40px 40px 0;
    float: none;
  }

  .woocommerce div.product .images {
    padding: 10px;
    width: 100%;
  }

}

We would loved to know if this has work for you. Thank you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.