Docs

[Michael C]

Starting development on a new site and I am finding a styling issue that I can’t seem to figure out.

Temp location: http://acerubberstamps.twoguyswebserv.wpengine.com/shop/

I would like 3 columns. Currently set to 4 columns in Customizer. If I do anything less than 4 it only shows 1 column to the left. Somehow there’s something stopping it from going full width, or right side not able to display products.

Any ideas?

Thanks,

Mike

[Rupok]

Hi Mike,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

@media only screen and (min-width: 980px) {
.woocommerce li.product.first {
    clear: none;
    margin-right: 4% !important;
}
}

Hope this helps.

Cheers!

[Michael C]

Thanks so much!

I tried to drop the code you gave into the child theme, and it didn’t work. But when I dropped it into the customizer it did work. Why is that? I like to use the style.css in the child theme for all my css updates/mods, so I don’t have to have those in two places.

just wondering if I’m doing something wrong, or what?

Thanks again for the code. Much appreciated!

Mike

[Lely]

Hello Mike,

There are two reason why CSS might not work. CSS syntax error or CSS specificity. In your case it is the latter.
If you want to place the CSS on the child theme, update to this:

 @media only screen and (min-width: 980px) {
.woocommerce li.product.first {
    clear: none !importamt;
    margin-right: 4% !important;
}
}

Regarding specificity, there’s a more specific CSS that is overriding that one. Adding !important will make sure that it will work on top of other CSS.

Hope this helps.

[Author]

Posts