CSS WordPress WooThemes and Boxes!

[zigvt85]

Well, I am having trouble on my friends website it has been bugging me for awhile now. The boxes I made work great. however if the browser shrinks below 800 (pixels) then the boxes go into 2 rows instead of staying in 4rows. I am trying to make them stay in 4rows. I have even tried firebug but I do not understand how it really works yet so its useless to me. Anyways here is my dev page I have everything basically the same setup so I could show people.

Theme: http://www.soslidesigns.com/dev/

I would really appreciate anyone’s advice or theory on how to fix the what should be simple issue. If you would like my box code in css please let me know I will post it.

Thanks,
Zig

[Soren]

I think what you’re looking for is in woocommerce-smallscreen.css, found inside woocommerce plugin folder.

@media screen and (max-width: 768px) {
  .woocommerce ul.products li.product:nth-child(2n), 
  .woocommerce-page ul.products li.product:nth-child(2n) {
    
float: right;
    clear: none!important;
  }
}

@media screen and (max-width: 768px) {
  .woocommerce ul.products li.product, 
  .woocommerce-page ul.products li.product {
    width: 48%;
    float: left;
    clear: both;
    margin: 0 0 2.992em;
  }
}

You need to overwrite them somehow in your theme stylesheet. A quick test would be to remove them from the smallscreen.css, but when going live always overwrite via your theme’s stylesheet.

[zigvt85]

Never would of thought to look there. Thank you I will try them out now.

[zigvt85]

I know I should not double post but this is saying thank you! This has fixed my problem this is how I made the code work for future uses.

@media screen and (max-width: 768px) {
  .woocommerce ul.products li.product:nth-child(2n), 
  .woocommerce-page ul.products li.product:nth-child(2n) {
    float: left!important;
    clear: none!important;
  }
}

@media screen and (max-width: 768px) {
  .woocommerce ul.products li.product, 
  .woocommerce-page ul.products li.product {
    width: 185px!important;
    float: left!important;
    clear: none!important;
    margin: 0px 0 8px 8px!important;
  }
}

I just added !important and basically duplicated my box code and instead of clear: both; i changed it to clear:none; it seems to work now! Again thanks for the help.

[Author]

Posts