(Squarespace) How to change Portfolio Overlay to Carousel on Desktop

To change Portfolio Overlay to Carousel on Desktop, you can do these.

  • Use Portfolio Overlay
  • Use code to add a Portfolio Carousel
  • Use CSS to hide Carousel (Mobile) – hide Overlay (Desktop)

#1. First, follow this guide to add Portfolio Carousel.

#2. Find ID of Portfolio Overlay & Carousel.

In my example, we will have:

Portfolio Overlay

Portfolio Carousel (use Code Block)

#3. Use this code to Custom CSS

/* Hide Overlay on Desktop */
@media screen and (min-width:768px) {
    section[data-section-id="67f782d36862e60e59dc2681"] {
        display: none !important;
    }
}
/* Hide Carousel on Mobile */
@media screen and (max-width:767px) {
    section[data-section-id="6821eec05a6acf43f1f6e4fd"] {
        display: none !important;
    }
}

#4. Result

Desktop

Mobile

1 Like