Jump to content

How to properly remove the area below a Reel in order to gain more vertical space?

Recommended Posts

On my front page there's an area below the Reel slideshow, that is empty, but isn't filled by the pictures from Reel, although they would be big enough. The area I'm speaking about lies below the navigation arrows:

image.thumb.png.7de68f09a00dfe72e229aff83d529726.png

Is it somehow possible to remove this area, so that the Reel gets more vertical space?

The site can be found here, the PW is "knockknock".

Link to comment
  • Replies 3
  • Views 367
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

the only area that I'm seeing that is customizable is your margin and a small amount of padding. you can add a spacer block on top or mess around with some of the numbers below.

 

.gallery-reel[data-controls-location="below"] .gallery-reel-list, .gallery-reel[data-controls-location="below-left"] .gallery-reel-list, .gallery-reel[data-controls-location="below-right"] .gallery-reel-list, .gallery-reel[data-controls-location="below-center"] .gallery-reel-list {
    margin: 0 0 0px !important;
}

.gallery-reel-wrapper {
    width: 100%;
    height: 100%;
    top: 100px !important;
}

Link to comment
1 hour ago, noahawaii said:

the only area that I'm seeing that is customizable is your margin and a small amount of padding. you can add a spacer block on top or mess around with some of the numbers below.

 

.gallery-reel[data-controls-location="below"] .gallery-reel-list, .gallery-reel[data-controls-location="below-left"] .gallery-reel-list, .gallery-reel[data-controls-location="below-right"] .gallery-reel-list, .gallery-reel[data-controls-location="below-center"] .gallery-reel-list {
    margin: 0 0 0px !important;
}

.gallery-reel-wrapper {
    width: 100%;
    height: 100%;
    top: 100px !important;
}

After pasting your CSS code, the distance between the page title and the Reel actually increased and the images got cropped.

Link to comment

well it's targeting the only area that I found that was customizable. CSS updates live as you change the numbers so you don't have to listen to the numbers i pasted in there. You're probably referring to the "top" number. Just change it or you can try "bottom" as well and see what you like. or both

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.