我想通过jquery脚本在Mobile视图中每行更改数据项

Question

我正在使用Squarespace设计网站。当前，在正方形默认模板中，每行数据项设置为3。请在下面的屏幕快照中查看标记为红色的代码。

您看到“ data-item-per-row =“ 3”“的地方，我希望将其更改为”“ data-item-per-row =” 1“”，仅用于使用jquery脚本的移动视图，如果可能吗？

Answer 1

碰巧，不需要JavaScript / JQuery就可以在移动设备上实现一列产品。实际上，如果您要更新此数据属性值并且不执行任何其他操作，那将没有效果。您还必须重新初始化产品网格，这可能会非常耗时。

相反，只需使用通过Custom CSS插入的CSS：

@media only screen and (max-width: 640px) {
  .ProductList-item {
    width: 100% !important;
  }
}

640px的值是Brine-based Squarespace templates上的默认“移动”断点，很可能就是您使用的断点。您可以根据自己的喜好在上面的CSS中调整该值。