Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ben Taylor
Ben Taylor
902 Points

WooCommerce Float issue

Hey guys,

I built a site for a friend of mine a while back, has worked swimmingly. The other day he updated his WooCommerce and it's made the Related Products have a float issue.

I haven't done any editing in the template files, this has literally started since he updated WooCommerce. Having a look on the inspector, it looks like the second item isn't supposed to have padding to the right, but it does, which makes it wrap.. does anyone have any clues on how to fix?

http://www.diablomagic.co.uk/product/master-course-sponge-balls-set-vol-1-4-by-daryl-video-download/

(Scroll to the bottom)

Many thanks in advance,

Ben

2 Answers

Andrew McCormick
Andrew McCormick
17,730 Points

I don't see anything that has padding-right set in your related items. Do you mean margin-right? I see that if I set ul.products li.product:nth-child(2n) to margin: 0; is gives me a two column display. Is that what you are going for?

If so, add the ul.products li.product:nth-child(2n){ margin: 0; } to your css and see if that fixes it.

Ben Taylor
Ben Taylor
902 Points

Hey Andrew,

Thanks for your reply. I did this and it fixed it.. but it also messed up the product display on a categories page, it makes the second product have no margin: http://www.diablomagic.co.uk/product-category/card-tricks/

Any idea?

Andrew McCormick
Andrew McCormick
17,730 Points

then you need to be more specific with it. since the ul is in a div with a class of 'related' and 'products', we can add .related.products to the css declaration.

.related.products ul.products li.product:nth-child(2n) {
margin: 0;
}
Ben Taylor
Ben Taylor
902 Points

Thanks so much!

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Edit: If you want two columns follow Andrew McCormick instructions, but is you want a signal column use mine.

Change line 4189 of your indigo.css file to this:

 ul.products li.product:nth-child(2n) {
    margin-right: 3.8% !important;
  }

A word of warning, this will fix your problem on this page, but I can't really check to see if it will cause problems on other page.

Ben Taylor
Ben Taylor
902 Points

Hey Andrew,

Thanks for the reply, this didn't fix it for me sadly, it made every product go onto it's own line :(