我正在尝试编辑此页面上两个蓝色 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;
}
最佳答案
你说:
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%;
}
}
关于css - 使用 CSS 进行响应式设计编辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33766999/