Squarespace 7.1 has a built-in option to hide blocks on mobile in the editor, but it's limited. CSS media queries give you precise control over exactly what shows on each device size.
Target elements by their section ID or block class and use display: none within a media query breakpoint. Squarespace's mobile breakpoint is typically 767px and tablet is 1024px.
/* Hide on mobile only */
@media screen and (max-width: 767px) {
[data-section-id="YOUR_SECTION_ID"] {
display: none !important;
}
}
/* Hide on desktop only (show only on mobile) */
@media screen and (min-width: 768px) {
[data-section-id="YOUR_SECTION_ID"] {
display: none !important;
}
}
/* Hide on tablet only */
@media screen and (min-width: 768px) and (max-width: 1024px) {
[data-section-id="YOUR_SECTION_ID"] {
display: none !important;
}
}Find more snippets in our CSS CheatsheetTry it free →
