Page Sections

GENERAL ELEMENT COMPONENTS & CSS SNIPPETS

 Select a Squarespace Element to Examine CSS Selectors:

Squarespace Element Description
Page Sections The individual page sections that are added to pages in Squarespace 7.1. We can select specific sections, sections in a certain color theme, or sections using a certain width and height

 CSS Code Snippets for Customizing Page Sections

Add a top-to-bottom linear gradient background to a page section

//Start: Linear Gradient Background for Page Section
[data-section-id="SECTION_ID_GOES_HERE"] .section-background { 
    background-image: linear-gradient(#e31e6f, #e64e62);
}
//End: Linear Gradient Background for Page Section

Hide/show pages on desktop and mobile

//Start: Hide a Page Section on Mobile Devices
@media screen and (max-width: 769px) {
  [data-section-id="SECTION_ID_GOES_HERE"] {
    display: none;
  }
}
//End: Hide a Page Section on Mobile Devices
//Start: Hide a Page Section on Desktop Devices
@media screen and (min-width:769px) {
  [data-section-id="SECTION_ID_GOES_HERE"] {
    display: none;
  }
}
//End: Hide a Page Section on Desktop Devices

Always show the mobile fallback image for page sections with video backgrounds

// Start: Force mobile fallback image for background videos
@media(max-width: 768px) {
  .sqs-video-background-native__fallback-image--hidden {
    opacity: 1 !important;
  }
}
// Start: Force mobile fallback image for background videos

Color Themes

Target elements only in page sections using the “Lightest 1” color theme

/* LIGHTEST 1 */
.page-section.white /*SELECTORS GO HERE*/ { 
   
}

Target elements only in page sections using the “Lightest 2” color theme

/* LIGHTEST 2 */
.page-section.white-bold /*PUT SELECTORS HERE*/ { 

}

Target elements only in page sections using the “Light 1” color theme

/* LIGHT 1 */
.page-section.light /*PUT SELECTORS HERE*/ { 

}

Target elements only in page sections using the “Light 2” color theme

/* LIGHT 2 */
.page-section.light-bold /*PUT SELECTORS HERE*/ { 

}

Target elements only in page sections using the “Bright 1” color theme

/* BRIGHT 1 */
.page-section.bright-inverse /*PUT SELECTORS HERE*/ { 

}

Target elements only in page sections using the “Bright 2” color theme

/* BRIGHT 2 */
.page-section.bright /*PUT SELECTORS HERE*/ { 

}

Target elements only in page sections using the “Dark 1” color theme

/* DARK 1 */
.page-section.dark /*PUT SELECTORS HERE*/ { 

}

Target elements only in page sections using the “Dark 2” color theme

/* DARK 2 */
.page-section.dark-bold /*PUT SELECTORS HERE*/ { 


}

Target elements only in page sections using the “Darkest 1” color theme

/* DARKEST 1 */
.page-section.black /*PUT SELECTORS HERE*/ { 


}

Target elements only in page sections using the “Darkest 2” color theme

/* DARKEST 2 */
.page-section.black-bold /*PUT SELECTORS HERE*/ { 

}
Previous

Footer
Next

Specific Pages