使用CSS对Squarespace块重新排序

如何更改Squarespace中照片和文字的顺序,使其在桌面上以一种方式查看,但在移动设备上重新排序?我已经看到了与此类似的问题,所以我尝试了自己的代码,但没有任何改变。

我有索引页,可以平衡桌面上其上方页面的布局(section1 =左侧图片/右侧文本,section2 =左侧文字/右侧图片)

在移动设备上,流程是向后的(section1 =顶部图像/底部文本,section2 =顶部文本/底部图像)。

网页为:www.northcountryarmory.com/fort-knox

lishuangw 回答:使用CSS对Squarespace块重新排序

您可以通过两种方式使用flexbox。如果您正在寻找Flexbox,reverse the order就是您所需要的(这是我对所写内容的理解)。另外,您也可以使用flex order来手动更改页面上特定元素的顺序。

,

这确实是Squarespace网站上相当普遍的需求(并且已经for years)。不幸的是,Squarespace当前不提供任何特定于移动设备的块布局选项。

此外,每个站点的布局都不同,以致于很难编写通用的CSS。这是视情况而定。

在您的情况下,您可以定位到特定页面(通过body元素上的集合ID),然后定位每个均匀编号的索引页面部分。请注意,以这种方式进行定位只会影响该页面,并且只会影响该页面上的索引部分。

通过CSS Editor / Custom CSS插入以下LESS CSS:

@media screen and (max-width: 640px) {
  #collection-5db8b183ea3e1a49745ba89a .Index-page:nth-child(even) {
    .sqs-row {
      display: table;
    }
    .sqs-col-6:last-child {
      display: table-header-group;
    }
  }
}

以上内容不使用flexbox,而是使用CSS表。在您的情况下,这需要较少的代码,并且将具有更广泛的兼容性。但是,Flexbox是另一种实现方法。

对于其他可能会读到此内容的人,您可能需要针对您的特定站点/上下文提出一个新问题(并务必提及您尝试过的代码)。

本文链接:https://www.f2er.com/2774865.html

大家都在问