Jump to content

How to adjust spacing between sections

Recommended Posts

Site URL: https://sapphire-buttercup-p87m.squarespace.com/

Hi,

I've just set up a gallery section to the page https://sapphire-buttercup-p87m.squarespace.com/vinkurs-bestilling

I'm looking to inject CSS to reduce the space above and below the gallery slide show if possible. Or is this spacing in case there's images in portrait orientation? I'm only using landscape images hoping that it would reduce the spacing, but doesn't seem to have any effect.

Kind regards,

Mathias

Screenshot 2021-01-29 161545.jpg

Screenshot 2021-01-29 161840.jpg

Link to comment
33 minutes ago, mattematissen said:

Site URL: https://sapphire-buttercup-p87m.squarespace.com/

Hi,

I've just set up a gallery section to the page https://sapphire-buttercup-p87m.squarespace.com/vinkurs-bestilling

I'm looking to inject CSS to reduce the space above and below the gallery slide show if possible. Or is this spacing in case there's images in portrait orientation? I'm only using landscape images hoping that it would reduce the spacing, but doesn't seem to have any effect.

Kind regards,

Mathias

Screenshot 2021-01-29 161545.jpg

Screenshot 2021-01-29 161840.jpg

what is the site password

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
1 hour ago, mattematissen said:

vintilfolket

Thanks!

Try

@media screen and (min-width: 768px) {
  .gallery-slideshow {
      padding-top: 0vw;
      padding-bottom: 0vw;
  }  
}

image.thumb.png.4034d372148f2faa2810bb242c6fd030.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
15 hours ago, mattematissen said:

@bangank36 Thanks! That worked well for desktop, but still too much spacing on mobile. I reduced "min-width" accordingly so I guess this is as much as can be achieved.

 

 

Screenshot 2021-01-30 110355.jpg

it looks fine?

image.png.8ebcc6914d09584072fc16a1b5670b23.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
14 hours ago, mattematissen said:

@bangank36 That's a static image on the front page. Go to "vinkurs" to see the gallery.

it's because of the ratio, the best i can do is to reduce padding of the above section, but not so much

@media screen and (max-width: 640px) {
  section[data-section-id="60140563c49f6c4a0d99826c"] .content-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }  
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.