响应式设计与使用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%; 
} 
}