Jump to content

Custom spacing between sections and blocks

Recommended Posts

Site URL: https://chimes-tomato-2rwe.squarespace.com/

Hi, I'm after some help with some spacing amendments?

https://chimes-tomato-2rwe.squarespace.com/

Password: LINCHPIN

I'm looking to inject CSS and have even gaps and padding between Gallery grid simple blocks (site wide) on mobile and desktop.

2025773462_ScreenShot2020-05-15at12_22_34pm.thumb.png.97bbee5181ba8c657a5e0ea4239f9a35.png

1004934011_ScreenShot2020-05-15at12_22_50pm.thumb.png.ce69b032d2056be63755faf4b1cf0207.png

I'd also like to be able to adjust section width to be thinner than the default of 10 (VW?) site wide when needed as I want to add thin lines between different sections.

1198025347_ScreenShot2020-05-15at12_28_41pm.thumb.png.573531d299bcb246c4d12005adafeffd.png

@tuanphan I'd love your thoughts?

Kind regards.

Lincoln

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

To adjust spacing, add this to Home > Design > custom CSS

@media screen and (min-width:768px) {
/* red section */
[data-section-id="5ebdf6c777554077ad768c0d"] .gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-column-gap: 5vw !important;
    grid-row-gap: 5vw !important;
}
/* cream section */
[data-section-id="5ebdf6c777554077ad768c15"] .gallery-grid--layout-grid .gallery-grid-wrapper {
    grid-column-gap: 5vw !important;
    grid-row-gap: 5vw !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
28 minutes ago, lincolnjubb said:

Thanks Tupan! However, the gap is still larger on mobile between the two images? Kind regards.

you can try adjust 5vw to 1vw or 1px

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.