Search code examples
responsive-designsquarespace

Looking for guidance on how to add custom class to sections and modules in Squarespace?

I have a client who is using Squarespace and asked that I fix a mobile stacking issue.

I have 2 rows that have image + text alternating side by side. This looks fine on desktop, but the on mobile the stacking order is wrong.

Desktop Stacking:

Image + Text

Text + Image

Current Mobile Stacking:

Image 

Text

Text

Image

Ideal Stacking:

Image

Text

Image

Text

Typically I was accomplish this by alternating the sections with a custom class, but I'm not seeing any place to add this. Are you able to add custom classes to sections?

Any help is appreciated. Thanks!

Solution

  • It is not possible to directly edit the markup that appears within Squarepace's default grid and block system (they call it, "LayoutEngine"). Generally speaking, one must either write their own HTML within a Code Block (or via Code Injection points), or use JavaScript to alter the HTML after the default markup is loaded onto the page.

    But in your case specifically, this is a common problem in Squarespace, and it is usually solved with just CSS, using a combination of:

    1. first-child, last-child and nth-child selectors, and/or
    2. the > direct-descendant/child-combinator, and/or
    3. specific block IDs (each sqs-block has a unique id attribute), and/or
    4. a media query so that the rules only take affect after your mobile breakpoint is reached, and/or
    5. either display:flex with the order property. or display:table-header with display:table-footer in order to force a different stacking order.

    The specific CSS often varies greatly based on the specific circumstance, whether you're trying to reorder blocks, columns, or rows. The similar question linked to above provides a specific solution to the same problem you are trying to solve, but the code that solves it in your case may look quite different, though it will likely use a combination of the five things mentioned above.

    Or, you can use JavaScript to target the blocks and add your own classes, then write the CSS with those classes. Even in that case, the general approach is the same.