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!
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.
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?
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)
.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.
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.
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.