如何使基于网格的布局设计响应?

时间:2018-04-15 18:36:50

标签: css grid-layout plone-4.x

我正在努力使我的网站https://take-note.com的设计得到回应。除了使用基于网格的布局的部件之外,我能够完成大部分工作。页面底部有4列图像,标题为“注释”,“模因”,“现场注释”和“首页新闻”。我希望这些在狭窄的移动设备上出现在另一个之下。我试图将宽度设置为100%,但似乎没有这样做。

CSS大师的任何建议?

1 个答案:

答案 0 :(得分:2)

在此处使用媒体查询:

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

这将使4列在宽度小于768px的设备中低于另一列;您可以根据您的使用情况相应地调整此目标设备