Jump to content

Video Collection Page Customization (full width video preview)

Go to solution Solved by JayVanDyke,

Recommended Posts

Hi All,

I am setting up a video collection page as the homepage of a website. 

I would like there to be no padding around the videos and for each row of videos to span the full width of the page, like this:

image.thumb.png.7c0c38c97750b6b1b3de85d8fce6597c.png

I have a bit of CSS in there already to make the title and excerpt appear on hover. I would like this effect to still work with the full-width videos.

Any help would be much appreciated!

https://keyboard-wedge-26cw.squarespace.com/

PW: test123

Page: Home

 

Edited by Chlobot
Link to comment
  • Replies 6
  • Views 175
  • Created
  • Last Reply

Top Posters In This Topic

@Chlobot maybe this?

.lessons-list-section {
  .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;

    .grid-item .lessons-image {
      margin-bottom: 0 !important;
    }
  }
}

And for the spacing between videos you can set that in the section settings here.

image.jpeg.12a1c623b77adca8a8e487fb0523d44e.jpeg

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment

@Chlobot I’m not sure what you mean by 15”. Can you share a screenshot? Physical measurement of the screen doesn’t really correlate to the code, only things like pixels. Do you mean it eventually starts to show strips on the sides of the screen again when the window gets larger?

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment

@JayVanDyke Yes, there are strips along the side at larger screen widths. See the images below. Note: the screen sizes are shown at the top of the screen shot. The first image is 1440px wide - this is the widest at which the videos still appear full-width. Thank you!!!

 

 

Screenshot 2024-06-12 at 15.08.04.png

Screenshot 2024-06-12 at 15.08.13.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.