css - 在移动优先样式表中重置宽度 div 元素

Question

我正在尝试为 Justin Tadlock 的移动版 Grid Columns 插件设计样式。来源:https://github.com/justintadlock/grid-columns

在我的 css 文件中，我想将移动设备的 .column-grid .column width 设置为完整，并将宽度重置为 min-width: 768px

.column-grid .column {
    float: left;
    margin-right: 5%;
    margin-left: 0;

    }

@media only screen and (min-width: 768px) {
.column-grid .column {

    }
}

我尝试了 width: 100% 与 width: auto，以及 display: block 与 display: inline .然而，它并没有起到作用。

请注意，实际的列宽是在 .column-grid .column 包装器中设置的。

关于如何聪明地做到这一点有什么建议吗？

Answer 1

如果您尝试在移动设备上垂直堆叠列并让它们在桌面上显示为列，请更改媒体查询:

@media only screen and (max-width: 768px) {
.column-grid .column {
 width: 100%;
 }
}

否则我需要在上下文中查看您的标记。