css - 使用 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

你说:

I need to make the blue backgrounds full width after the responsive screen size of 768. So any screen size below 768 will have these boxes full width. What I am trying to match are the full width boxes above...ShieldKote and VaultKote.

您正在寻找的样式规则(将 ShieldKote 和 VaultKote 部分的宽度扩展到特定视口(viewport)宽度以下的 100%)是:

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