Trouble getting Woocommerce widget to display correctly

HTML & CSS
1

URL: http://goo.gl/UOLXRu

At the bottom of the home page, I have a row of 4 sample products that are in Woocommerce. Under those are 4 “latest posts” from the blog. I am trying to get them to display exactly the same (except the images have different heights).

Every change I make to the CSS of the sample products (using Firebug) either puts too much space between them or makes the images too narrow.

I’d really appreciate an extra set of eyes on this to show me what I’m doing wrong. Thanks!

2

It looks perfect in Chrome. Where are you seeing the issue? And can you be more specific?

3

Hi Ryan,

Thanks so much for your reply. I’m using Chrome and this is what I see: http://awesomescreenshot.com/0963j5y479

As you can see, I added line guides to the first two columns so you can see how off the products are. When I try to adjust the width or padding on the products, it just isn’t working for me. There is way too much space between the images and they don’t match the blog posts below.

4

susannelson,

style.css (lines 1057, 1074, ???)
find the following style

.home-bottom .widget_products li, .home-bottom .woocommerce ul.cart_list li, .home-bottom .woocommerce ul.product_list_widget li, .home-bottom .woocommerce-page ul.cart_list li, .home-bottom .woocommerce-page ul.product_list_widget li {
    margin-left: 2.5641% !important;
}

Divide by 2 and apply the margin equally to the right and left sides of the “li” instead.

1 Like
5

Thanks so much, ronpat. I’m closer, but it’s still off. Can you help me understand how to determine the exact left/right margins? What is the equation I should use?

6

I believe Ron meant this

margin:0 1.2820% 0; /*top right/left bottom*/

Technically this is 0.0001 off though ;). I went off what Ron said - take that 2.some percent margin and divide by two. Then put that value on both sides of hte LI (left and right margin)

7

susannelson,

Part 1:

http://demo.ohhellodesigns.com/adorne/wp-content/themes/amore/style.css?ver=3.0.0 (line 1057)

.home-bottom .woocommerce ul.cart_list li img,
.home-bottom .woocommerce ul.product_list_widget li img,
.home-bottom .woocommerce-page ul.cart_list li img,
.home-bottom .woocommerce-page ul.product_list_widget li img,
.home-bottom .woocommerce ul.cart_list li,
.home-bottom .woocommerce ul.product_list_widget li,
.home-bottom .woocommerce-page ul.cart_list li,
.home-bottom .woocommerce-page ul.product_list_widget li {
    float: left;
    margin-left: 0 !important;
    width: 280px;
}

This bang!important modifier overrides everything that follows. The use of !important should be kept to an absolute minimum. This margin-left needs to be deleted because your style on line 1074 is taking its place.

Part 2:

http://demo.ohhellodesigns.com/adorne/wp-content/themes/amore/style.css?ver=3.0.0 (line 1074)

.home-bottom .widget_products li,
.home-bottom .woocommerce ul.cart_list li,
.home-bottom .woocommerce ul.product_list_widget li,
.home-bottom .woocommerce-page ul.cart_list li,
.home-bottom .woocommerce-page ul.product_list_widget li {
    float: left;
    margin: 0 1.45%;
}

This is the new code that you wrote.

The suggestion to apply half of the desired space between two images to the right and left sides of each product box is correctly coded (with a little more than the value that @Ryan correctly calculated) but is not being implemented because of specificity. Instead, the !important modifier on line 1057 is setting the left margin to zero on all instances of those selectors throughout all stylesheets. Thus, effectively, a 1.45% margin has been switched to the right side of these content boxes. Since the product boxes are left aligned, that’s an OK compromise, but that is not what we expected to happen and not what you coded in line 1074. No changes to line 1074.

Part 3:

http://demo.ohhellodesigns.com/adorne/wp-content/themes/amore/style.css?ver=3.0.0 (line 1084)

.home-bottom .widget_products li:nth-child(4n+1),
.home-bottom .woocommerce ul.cart_list li:nth-child(4n+1),
.home-bottom .woocommerce ul.product_list_widget li:nth-child(4n+1),
.home-bottom .woocommerce-page ul.cart_list li:nth-child(4n+1),
.home-bottom .woocommerce-page ul.product_list_widget li:nth-child(4n+1) {
    margin-left: 10px !important;
}

The above style is being applied to the first, fifth, ninety, etc, product boxes. Another bang!important modifier. It needs to be deleted so your code on line 1074 can be applied.

EDIT:

susannelson,

The code above is from your stylesheet. Part 1 contains 8 selectors. Parts 2 and 3 contain 5 selectors each. I did not try to identify exactly which selector in each group needs the code change. It may not matter. But if you cannot tell which one should be changed or which ones should not be changed, please ask for clarification. Otherwise, the change may unintentionally disrupt other "li"s. As always, TEST THOROUGHLY and understand what the code is doing.

8

Thank you for all your advice! I was able to get it working as I wanted. I appreciate your help!