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
  • Replies 8
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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;
  }  
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.