(Squarespace) Show multiple sections on Desktop - Mobile

[tuanphan]

To show a specific section on Desktop or Mobile, you can follow these.

#1. First, use this code to Custom CSS box.
If code doesn’t work, you can comment below, message or email me.

/* hide section - desktop */
@media screen and (min-width:768px) {
  section.page-section:has(.hide-desktop) {
    display: none;
  }
}
/* hide section - mobile */
@media screen and (max-width:767px) {
   section.page-section:has(.hide-mobile) {
    display: none;
  }
}

#2. Edit Section where you want to hide it on Desktop > Add a Code Block

Paste this code into Code Block

<div class="hide-desktop"></div>

#3. Edit Section where you want to hide it on Mobile > Add a Code Block > Paste this line.

<div class="hide-mobile"></div>

#4. In case you want to do this on Gallery Section. You can enable Gallery Caption.

Then add this syntax to First Image Description

<div class="hide-desktop"></div>

or this syntax.

<div class="hide-mobile"></div>