Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Keep Spacer Blocks on Mobile


Squarespace automatically removes spacers placed next to any other blocks on mobile, but I want to keep them on one particular page. I'm using the Clay template. Does someone have some code I can use in Custom CSS? I'm familiar with the "@media screen and (min-width: 640px)" bit and locating the id ("yui_" etc.), I just need the rest of it. Thanks in advance!

Share this post

Link to post

1 answer to this question

Recommended Posts

  • 0

Hi @knockout

<your-id-here> .sqs-layout .sqs-block-spacer {
    display: block !important;

In the above code, you can insert a page ID, a section identifier, or a block ID. Use your browser's dev-tools/web-inspector to locate these IDs:

  • The collection ID is usually the id attribute of the <body> element. This will target a specific page.
  • A section ID may be used on stacked index pages. You can find it by looking at the id attribute of <section> elements. It also correlates to the URL slug for a given page/section in the index. This would target spacer blocks in a specific section.
  • A block ID can be used to target a specific spacer block. You can find it as the id attribute of a div, usually starting with "block-yui_"

More about ids in Squarespace.


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...