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

Question

我正在努力使我的网站设计 https://take-note.com 具有响应性。除了使用基于网格的布局的部分外，我能够完成大部分工作。页面底部有 4 列图像，标题为 "notes"、"memes"、"field notes" 和 "front page news"。我希望这些在狭窄的移动设备上显示在另一个下方。我尝试将宽度设置为 100%，但似乎没有成功。

CSS 专家有什么建议吗？

Answer 1

像这样使用这里的媒体查询：

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

这将使 4 列在宽度小于 768 像素的设备中彼此相邻；您可以根据您的用例相应地调整目标设备

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

How to make a grid based layout design responsive?

css

grid-layout

plone-4.x