facetwp模板中的网站响应问题

Question

什么是正确的方式来使模板的facetwp插件提供给我响应，因为它是一个短小的代码，它给我的问题。

该页面为https://f3mkt.com/marel/catalogo/

Answer 1

有了@media css，在他们的gists here数据库中提供了@media css，你就可以使用它作为基础

.fwp-grid {
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  justify-content: flex-start;
  width: 100%;
}

@media (max-width: 400px) {
  .fwp-grid {
    display: block;
  }
}

.fwp-grid .fwp-grid-col {
  padding: 1em 1em 1em 2em;
  width: 33.3%;
  text-align: center;
}

@media (max-width: 800px) {
  .fwp-grid .fwp-grid-col {
    width: 50%;
  }
}

@media (max-width: 400px) {
  .fwp-grid .fwp-grid-col {
    width: 100%;
  }
}

.fwp-grid .fwp-grid-col h3 {
  padding-top: .25em;
}

.fwp-grid img {
  max-width: 100%;
}