General

How do I hide a specific element by its ID in Squarespace?

Every content block in Squarespace 7.1 has a unique block ID in the format .sqs-block followed by a data-block-id attribute. Use either selector to hide specific blocks.

This is useful for hiding elements on desktop but not mobile (or vice versa), or hiding blocks you can't delete because they're part of a template structure.

/* Hide by block data attribute */
[data-block-id="YOUR_BLOCK_ID"] {
  display: none !important;
}

/* Hide on desktop only */
@media screen and (min-width: 768px) {
  [data-block-id="YOUR_BLOCK_ID"] {
    display: none !important;
  }
}

/* Hide on mobile only */
@media screen and (max-width: 767px) {
  [data-block-id="YOUR_BLOCK_ID"] {
    display: none !important;
  }
}

Find block IDs with our ID Finder toolTry it free →

Related Questions

How do I find the CSS selector for any element in Squarespace?

How do I change the background color of a specific section in Squarespace?

How do I add a back-to-top button in Squarespace?

How do I add a scroll progress bar to Squarespace?

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Talk to Long Drive Marketing →