Help with resizing of featured images on WooCommerce homepage

Question

I cannot get the featured images on my home page to shrink. I wouldn't mind the size of the 3 smaller ones (even though I would like to know how to change their sizes too - just in case), but the one on the right hand side is just too big. I would like it to be just around 30% bigger than the smaller ones. I checked the elements on the page and found this:

@media only screen and (min-width: 768px)
ul.featured-products li:nth-child(4n), ul.featured-products li.fourth {
    width: 39%;
    margin-top: -20%;
}

I decreased the values for width and margin-top and got the big image to shrink, but I don't know where I can get the proper code from. I tried the above in the Custom CSS field, but it wouldn't work. I played around with the image size earlier and now the values I just mentioned are gone when I check the elements...

---

Okay, here is my additional question: If I wanted to change the size of the other images (I might want to do that in the future and want to be prepared), could I use the same code and just change parts of it? I tried that, but it only worked for the third image. I changed the code to:

@media only screen and (min-width: 768px) {
    div.home-intro ul.featured-products li:nth-child(3n), div.home-intro ul.featured-  products li.third { 
        width: 18%; 
        margin-top: 0; 
    }
}

When I tried to do the same with the other two images, it would override the code for the fourth image as well. I also realised that the product pages of the first two test products look fine, while the ones for the last two are all over the place (the description is to far away from the image, the related product images are far too big).

Answer 1

WooCommerces css is pretty specific so it can be quite tricky to override it sometimes. To override their css you need to be MORE specific with your css. So an example would be:

@media only screen and (min-width: 768px) {
    div.home-intro ul.featured-products li:nth-child(4n), div.home-intro ul.featured-products li.fourth { 
        width: 20%; 
        margin-top: 0; 
    }
}

In the above example I have added a parent element to the css rule (div.main-wrapper). This rule is now more specific and should override Woo's css. And you can just put this in the Custom css box, that should be fine.

Note: Ideally you should be making a custom image size and editing your template to use that image size.