Jump to content

Code to remove space above and below summary block image

Recommended Posts

Site: https://hemlock-neversink.squarespace.com/

PW: loveandwar

 

I am currently trying to use the summary block as an image carousel as 7.1 no longer has that feature. I would like to remove the space that is above and below the carousel images so it fills up the area that of the block. 

I am using a few codes but can't seem to figure out how to add a code to remove the space. 

 

Here are the codes that I am using...

To prevent from clicking to the summary post:

#collection-6466cdd37caf7d54b07e1e33  .sqs-block-summary-v2 .summary-item {
pointer-events: none !important;}

To move the arrows to the center of the image:

#collection-6466cdd37caf7d54b07e1e33 .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {
  color: white;
  padding-left: 15px;
  padding-right: 15px;
  float: none;
  width: 100%;
  position: absolute;
  bottom: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  z-index: 9;}


What I have right now:


image.thumb.png.048553ed62b042bc8f59dad2c6fa938b.png

 

What I would like to achieve:

image.thumb.png.c40f94399ede42cda35d798974a179f0.png

 

Thank you in advance!

Link to comment
  • Replies 6
  • Views 869
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

#collection-6466cdd37caf7d54b07e1e33 {
  .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-block-header {
    display: none;
  }
}

You can add this code below what you're already using which will remove the blank space above where the summary block header would be.

I can't replicate the space on the bottom though - you may need to just reduce the space in between the two text blocks next to each image

If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.

WEBSITEINSTAGRAM

 

Link to comment

Instead of having each text/image section as separate sections have you tried one section that contains the three or so text/image pairs in one section?

That way you wouldn't be dealing with the cross section padding.

You could duplicate your current page and test on it removing the multiple page sections.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.