使用CSS重新排列Squarespace块 [英] Reordering Squarespace blocks using CSS

问题描述

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

How can I change the order of photos and text in Squarespace so it views one way on desktop, but reorders on mobile? I've seen similar questions to this so I've tried my own code but it's not changing anything.

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

I have index pages that balance the layout of the one above it on desktop (section1 = image on left/text on right, section2 = text on left/image on right)

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

On mobile the flow is backward (section1 = image on top/text on bottom, section2 = text on top/image on bottom).

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

推荐答案

这确实是Squarespace网站上相当普遍的需求(并且已经

This is indeed a rather common need on Squarespace sites (and has been for years). Unfortunately, Squarespace doesn't currently offer any mobile-specific block layout options.

此外，每个站点的布局都不同，以致于很难编写通用的CSS.这是个案的基础.

Furthermore, each site's layout is different enough that it makes writing a universal bit of CSS difficult. It is a case-by-case basis.

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

In your case, you can target a specific page (via the collection id on the body element) and then target every evenly-numbered index-page section. Note that targeting in that way will only affect that page, and only the index sections on that page.

通过插入以下LESS CSSCSS编辑器/自定义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是另一种实现方式.要使用flexbox，请将父元素设置为 display:flex ，然后使用 order CSS属性.

The above doesn't use flexbox, but uses CSS tables instead. In your case, that requires less code and will be more broadly compatible. Flexbox is another way to do it, though. To use flexbox, set the parent element to display:flex and then use the order CSS property on the children within the context of a media query, similar to the above.

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

For others who may read this, you'll likely need to ask a new question for your specific site/context (and be sure to mention the code you've tried).

这篇关于使用CSS重新排列Squarespace块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！