0

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

2

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.

  • Hi Nath, thank you for your reply. I entered your code into the Custome CSS box, but the size of the image did not change. I also entered it into my child theme, but to no avail. I can't get it to work. – Karen May 14 '15 at 1:20
  • Did you change "div.main-wrapper" to suit your theme? That was just an example. I have no idea what elements your website has. – ngearing May 14 '15 at 1:32
  • Sorry I just saw the link to your website. Updated my answer to suit your theme. – ngearing May 14 '15 at 1:37
  • Hi Nath, thank you so much for the code. It's working now! :-) I played around with the value for the width and the margin-top as I want the fourth image to be a little bigger than the other images. It's perfect now! Just one question before I can finally close this chapter. I'll add the question to my initial post. Thank you again! – Karen May 14 '15 at 10:20
  • I found the issue I described in my additional question (initial post). The layout setting on the product page was different for the two products on the right. I've changed it and now all the product pages look the same. :-) – Karen May 15 '15 at 19:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.