如何在移動視圖中刪除填充並放大圖像

Question

在我的博客上 ，我試圖減少藍框內的填充並放大圖像，並刪除移動視圖的懸停。 到目前為止，我的代碼不會更改它。 我只是想使其對觸摸設備的響應速度更快

@media only screen and (max-width:800px) {
    #header, #pageWrapper, #footer {
        padding: 30px 20px;
        margin-bottom: 0px !important;
    }  
    h1.logo {
        text-align: center;
        padding-bottom: 10px
    }
    .slide img {
        opacity: 1
    }
    .sqs-active-slide img {
        opacity:1
    }
    .collection-type-gallery #slideshowWrapper .slide img {
        background-color: white !important;
        margin: 2px 0;
    }
    img {
        max-width: 200px;
    }
    .hentry {
        background: #F8F9FC;
        padding: 10px;
        border-style: solid;
        border-color: #E2E7F5;
        border-width: 2px
    }
    .collection-51ca14b1e4b014f2c6e0c3e7 .slide img {
        opacity:1.0;
    }
}

Answer 1

對於圖像，您需要使用!important聲明來覆蓋HTML中的常規特異性樣式。 例如，如果要將新寬度設置為400px：

.sqs-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor img {
    width: 400px !important;
    height: auto !important;
}

Answer 2

我可以馬上告訴您，您的最大寬度可能太高。 如果您定位的是智能手機，則最大應為640px。