Video Pages
GENERAL ELEMENT COMPONENTS & CSS SNIPPETS
Select a Squarespace Element to Examine CSS Selectors:
| Squarespace Element | Description |
|---|---|
| Video Listing Page | Refers to elements that appear on the main listing view of video collection pages |
| Video Individual Listings | Refers to elements that appear on individual video pages |
CSS Code Snippets for Customizing Video Pages
Hide pagination on video pages
To hide pagination on all collection pages, you can remove the “[data-collection-type*="lessons"]” attribute from the selector.
//Start: Hide pagination on video pages
.item-pagination[data-collection-type*="lessons"] {
display: none;
}
//End: Hide pagination on video pagesMake Video Page Top and Side Navigation Column Display on Mobile
//Start: Make Video Page Top and Side Nav Column Display on Mobile
@media screen and (max-width: 769px) {
.lessons-list-section .lessons-list.lessons.collection-content-wrapper {
.breadcrumb-separator {
display: none;
}
//Top Nav
.nested-category-children {
display: initial;
.nested-category-breadcrumb-link {
margin-left: 0;
padding: 5px 0;
display: block;
}
}
//Side Nav
.nested-category-tree-wrapper ul {
display: initial;
}
.category-item {
text-align: left;
}
.category-link {
margin-left: 0;
display: block;
padding: 5px;
}
}
}
//End: Make Video Page Top and Side Nav Column Display on MobileHide an element(s) only on video collection pages, including the listing page and the individual video item pages
Portfolio and video pages are constructed differently than other collection pages in that we don’t have any specific class names we can use to target the body element of these pages.
Instead, add this code snippet to the header code injection on the relevant collection pages.
Alternatively, you can use the Specific Page ID selector to target a specific collection page.
<style>
PUT_SELECTORS_HERE {
display: none !important;
}
</style>