響應式設計與使用CSS

Question

我想編輯的兩個藍色BaseKote產品包裝盒的外觀這個網頁上編輯http://korekote.com/epoxy-coatings-1

我需要做的藍色背景的768響應屏幕尺寸後全寬。因此，任何低於768的屏幕尺寸都會將這些框全寬。我想要匹配的是上面的全寬框...... ShieldKote和VaultKote。請注意兩節之間的10px空間。

我是新來的所有這種類型的CSS，但真的很想學習它。以下是我開始使用的，由於某些原因，它不起作用。

@media handheld, only screen and (max-width: 967px) { 

.basekote-bondkote-column .mk-image-inner img { 
    max-width: 450px; 

} 

.text-blocks .vc_col-sm-6 { 
    width: 100%; 
} 

.curing-profile .vc_col-sm-6 { 
    width: 100%; 
} 


body .vc_custom_1447710738280 { 
    border-right-width: 0px !important; 
    border-left-width: 0px !important; 
} 

#basebondkote .mk-padding-wrapper { 
    padding-bottom: 0; 
    padding-left: 0; 
    padding-right: 0; 
    padding-top: 0; 
} 

.vc_custom_1447710747652 { 
    border-right-width: 0px !important; 
    border-left-width: 0px !important; 
} 

.vc_custom_1447710738280 { 
    margin-top: 10px; 
    margin-bottom: 10px; 
} 

}

Answer 1

幽州：

我需要做的藍色背景的768的響應 屏幕尺寸後全寬所以低於768的任何屏幕尺寸將這些箱子 全屏寬度。我想要匹配的是上面的全寬框 ...... ShieldKote和VaultKote。

樣式規則你正在尋找（其擴展ShieldKote和VaultKote部分低於某一視口寬度100％的寬度）：

@media handheld, only screen and (max-width: 967px) { 
.mk-grid .coatings-product-column { 
    width: 100%; 
} 
}