How to add padding between items

You should avoid modifying theme or plugin files (unless there is a special place to add your own CSS) – as those changes are lost when the theme or plugin is updated. Instead install a custom CSS plugin and add CSS there. Try this:

.products img {
   margin-top: 20px;
   margin-bottom: 10px;
}

.products li {
     list-style-type: none;
}

I can’t help but just laugh….

Yes, that did EXACTLY what I wanted! Now would you mind telling me what exactly I did? What does “.products” reference, and how does it know to reference it? Are both of these pieces required to add the padding? Did I actually add the padding to the picture, instead of to the bottom of the container? I’m all for “here do this and shut up” solutions, but I do also like knowing what I’m doing so I can understand the process.

Thank you so much!

LOL – okay, it’s really about learning some basic CSS and how to use Firebug a bit more :). When I looked at that page with Firebug, I saw this HTML:

<ul class="products">
<li class="post-571 product type-product status-publish hentry first instock">
<a href="https://www.thebrasswardrobe.com/product/brushed-twill-bib-shirt/">
<img class="attachment-shop_catalog wp-post-image" width="150" height="150" alt="538720-BRN-preview" src="https://www.thebrasswardrobe.com/wp-content/uploads/2013/06/538720-BRN-preview-150x150.jpg">

So the CSS I gave you starts with the class of “products” – see that first line. And then has the img tag. So the CSS translates into “all images that are inside an element with the products class.” There are various ways to accomplish the same thing – some of the code you found is similar but might not have been quite what you needed. CSS is quite picky and theme/site specific.

The second part I added was to get rid of the bullets – I just figured that you probably did not want those there on that page :).

If you want to start learning more CSS (really fun actually), these are good sites:

https://www.w3schools.com/css/
https://developer.mozilla.org/en-US/learn/css

Look on the Firebug website too – they have super tutorials and info about using Firebug.

Hope that helps a bit more?

Ok, so then my problem wasn’t specific to either of the actual pages, but my lack of understanding CSS. If I understand this, “ul” and “li” are actually CSS code terminology, but where is “products” defined? Does it say in the firebug code? Also, the next thing I want to change is the font size of the product titles. I see where it’s at:

<img class="attachment-shop_catalog wp-post-image" width="150" height="150" alt="538720-BRN-preview" src="https://www.thebrasswardrobe.com/wp-content/uploads/2013/06/538720-BRN-preview-150x150.jpg"></img>
<h3>

    BRUSHED TWILL BIB SHIRT – BROWN

</h3>
<span class="price"> … </span>

But I’m not sure how I would or should redefine it. Should I change the H3 to like H6 (which is smaller)? Or should I just redefine H3 as a different size? I could probably redefine H3 like this right?

.products li {
     list-style-type: none;
}
.products H3 {
     font-size:1em;
}

Right? but I feel like I’d rather just change the whole source to use a different font size in the first place, except I have no idea how to even track down where it’s originally decided H3 is what’s used.

I’m still not understanding where the files are in relation to each other. There must be a woocommerce file that has all of the definitions and set up for the wrappers right? Does firebug say where that is?

And thanks for removing the bullets, that was gonna be a whole other question when I got to it ??