css - 如何使基于网格的布局设计具有响应性？

我正在尝试使我的网站的设计https://take-note.com具有响应性。除了使用基于网格的布局的零件以外，我能够完成大部分工作。页面底部有4列图像，分别为“注释”，“模因”，“字段注释”和“首页新闻”。我希望它们在狭窄的移动设备上一个接一个地出现。我试图将宽度设置为100％，但这似乎没有做到。

CSS专家有什么建议吗？

最佳答案

在此处使用媒体查询：

@media (max-width: 767px) {
  div.cell {
    width: 100%;
    margin-left: 0 !important;
  }
}