我无法在我的home page 收缩。我不介意3个较小的尺寸（尽管我也想知道如何改变它们的尺寸——以防万一），但右手边的那个太大了。我希望它比那些小的要大大约30%。我检查了页面上的元素，发现：

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

我减少了宽度和边距顶部的值，并缩小了大图像，但我不知道从哪里可以获得正确的代码。我在自定义CSS字段中尝试了上述方法，但不起作用。我之前玩过图像大小，现在当我检查元素时，我刚才提到的值消失了。。。

好的，这是我的另一个问题：如果我想更改其他图像的大小（我可能想在将来这样做并做好准备），我是否可以使用相同的代码，只更改其中的一部分？我试过了，但只对第三张图片有效。我将代码更改为：

@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; 
    }
}

当我尝试对其他两个图像执行相同操作时，它也会覆盖第四个图像的代码。我还意识到，前两个测试产品的产品页面看起来不错，而后两个产品的页面到处都是（描述离图片太远了，相关的产品图片太大了）。

@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; 
    }
}