Squarespace video collection pages have some cool features, but they are not designed for vertical videos. In this tutorial, you'll learn how to use custom CSS to change the layout so your 9:16 ratio videos look great.
Only need to change one video block, and not a collection? Check out this tutorial instead: insidethesquare.co/squarespac...
For the full tutorial description and more, visit the original blog post for this video: insidethesquare.co/squarespac...
Here are the codes from this tutorial; I've made a note so you know which values you can change to make it unique for your content:
/* video on the left; content on the right */
.lesson-item .lesson-details .lesson-video-inner-wrapper{
padding-bottom:178%!important
}
@media only screen and (min-width: 788px){
.lesson-item .lesson-details .lesson-desc{
flex-direction:row!important;
}
.lesson-item .lesson-details .lesson-video-wrapper{
width:50%;/* you can adjust this value */
margin:auto;
padding-right:50px;/* you can adjust this value */
padding-top:10px;/* you can adjust this value */
order:2
}
.lesson-item .lesson-detail-text-wrapper{
margin:2vw/* you can adjust this value */
}
}
/* video on the left; content on the right */
.lesson-item .lesson-details .lesson-video-inner-wrapper{
padding-bottom:178%!important
}
@media only screen and (min-width: 788px){
.lesson-item .lesson-details .lesson-desc{
flex-direction:row!important;
}
.lesson-item .lesson-details .lesson-video-wrapper{
width:60%; /* you can adjust this value */
margin:auto;
padding-left:50px;/* you can adjust this value */
}
.lesson-item .lesson-detail-text-wrapper{
margin:2vw/* you can adjust this value */
}
}
Related Content:
📺 Overview of Squarespace video pages → • Free Training: Squares...
📝 Original blog post → insidethesquare.co/squarespac...
❤️ Support my channel with a donation → buymeacoffee.com/insidethesquare
1️⃣ Add this code to a single collection page → insidethesquare.co/squarespac...
📖 Learn CSS for FREE → insidethesquare.co/learn
📑 My Squarespace code collection → insidethesquare.co/css
🙋♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ #SquarespaceTutorial #CustomCode #VerticalVideoFormat #WebsiteDesign #SquarespaceTips #WebDevelopment #VideoCollection #CreativeDesign #OnlinePresence #Squarespace7.1 #WebDesignInspo #DIYWebsite #TutorialTuesday #ContentCreation #DigitalMarketing
3 июн 2024
