Docs

[yvonne621]

Hi,

I’m using the icon theme with woocommerce and I’m trying to change the default column sizes in the responsive designs. I was able to use this css to make it two columns instead of 1 on small devices…

@media (max-width: 480px) {
.woocommerce .cols-1 li.product,
.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product,
.woocommerce.column-1 li.product,
.woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 48%;
}
}

HOWEVER, I’d like it to go from 4 to 3 columns when it goes to the 979 screen size but it currently goes to 2 columns which are just too large pictures and not what I want. I added this code

@media (max-width: 979px) {
.woocommerce .cols-1 li.product,
.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product,
.woocommerce.column-1 li.product,
.woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 29% !important;
margin-right:0px;
}
}

and it does seem to make it three columns except the third column remains empty and the third item stays on the row below. I can’t seem to make it go up with the others no matter how low I go with the width in the css so obviously I’m missing something but I can’t figure out what.

The page that best shows what my issue is is: http://thatsmyapple.staging.wpengine.com/shop-test/

As you can see, once you go to 979 px, it bumps from 4 items on a row to 2 and though there’s room for a third item it will not go up there.

Any help you can give would be greatly appreciated!

Thanks,

Yvonne

[Rue Nel]

Hello Yvonne,

Thanks for writing in! Your code needs a lot more so that you can pull off from 4 to 3 columns. Please have it updated and make use of this code instead:

@media (max-width: 979px){
  .woocommerce .cols-1 li.product,
  .woocommerce .cols-2 li.product, 
  .woocommerce .cols-3 li.product, 
  .woocommerce .cols-4 li.product,
  .woocommerce.column-1 li.product,
  .woocommerce.columns-2 li.product, 
  .woocommerce.columns-3 li.product, 
  .woocommerce.columns-4 li.product {
    width: 31% !important;
    margin-right: 2%;
  }

  .woocommerce .cols-3 li.product:nth-child(2n+2),
  .woocommerce .cols-4 li.product:nth-child(2n+2), 
  .woocommerce.columns-3 li.product:nth-child(2n+2), 
  .woocommerce.columns-4 li.product:nth-child(2n+2) {
    margin-right: 2%;
  }

  .woocommerce .cols-3 li.product:nth-child(2n+3), 
  .woocommerce .cols-4 li.product:nth-child(2n+3), 
  .woocommerce.columns-3 li.product:nth-child(2n+3), 
  .woocommerce.columns-4 li.product:nth-child(2n+3) {
    clear: none;
  }

  .woocommerce .cols-3 li.product:nth-child(3n+4), 
  .woocommerce .cols-4 li.product:nth-child(3n+4), 
  .woocommerce.columns-3 li.product:nth-child(3n+4), 
  .woocommerce.columns-4 li.product:nth-child(3n+4) {
    clear: both;
  }
}

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

[yvonne621]

Worked beautifully, thank you SOOOOOO much!

[Rahul]

Glad we were able to help you.

Let us know if we can help with anything else.

Thanks for choosing the X-theme. 🙂

[Author]

Posts