Brine: removing inset from ALL galleries

Hello fine Squarespace experts,

I'm swapping Five for Brine and I'm loving it. Mostly. Here's the issue:

I am using, and liking, the inset feature, BUT I still want to have white space on the sides of the page when I am doing side-by-side text or image blocks.

Problem: when I turn on "Site Padding" to accomplish the white space (currently at 50px), that site padding affects my gallery images, but I want to have FULL WIDTH galleries.

I've thought about this from many angles and since I have less galleries than any other blocks, it seems to make sense to override the site padding on galleries. I've tried to insert snippets of code found here and around the web, but nothing seems to work. Ideally what I'm hoping for is a global setting in Custom CSS, since there will never be a time where I dont want gallery images to appear full width.

I know I can do this with index pages, but some of these have to live as part of navigation sets, so that cant be a solution across the board.

Help much appreciated :)Maria

PS: The site currently is preview only since I'm revamping an existing website. Hence no reference links. If it's necessary, I can duplicate a page or two.

Can you share site url? Setup password & share url: https://beaverhero.com/squarespace-how-to/#HowtoSetupPasswordShareSiteURL

@tuanphan I can, but won't it just default to the existing active template? The live site is still on Five...

www.brooklynmeditation.org

Home page is great, that's using index to get the gallery to appear full-width.

https://www.brooklynmeditation.org/foundation-program^^ This is what I am trying to fix. How do I remove white space, specifically on the sides? (I can deal with top by simply removing that padding site-wide and adding a spacer when I need it.)

@riaskaya Add to Home > Design > Custom CSS

/* Remove white space */
body#collection-5bd0f6a8085229530612507f .Main-content {
   padding: 0;
}
/* Remove bottom scroll bar */
body#collection-5bd0f6a8085229530612507f {
   overflow-x: hidden;
}

@tuanphan That's awesome, totally works. However is there a way to code this to work globally and only on galleries? That would give me the flexibility of deciding how the images appear – If I dont want white space, I use images within a gallery, if I do want white space, I can simply use image blocks... does that make sense?

This site will be managed by volunteers, none of whom have CSS skills, so I'm hoping to just set this up in the simplest way possible for future changes.

@riaskaya

/* Entire Site */
/* Remove white space */
.Main-content {
    padding: 0;
}
/* Remove bottom scroll bar */
body {
    overflow-x: hidden;
}
/* One Page */
body#collection-5bd0f6a8085229530612507f .Main-content {
    padding: 0;
}
body#collection-5bd0f6a8085229530612507f {
    overflow-x: hidden;
}

Replacy body#...7f with Page/Post ID. Each Page/Post will have different ID.

See how to find Page ID: https://beaverhero.com/squarespace-how-to/#HowtoFindPageID

Got it – so there seems to be no way to target a specific block type only?

Is it possible to target a specific ID, for example: yui317211564334848279241

@riaskaya You can target specific block.

However, I don't know how to explain how to find the ID, for newbie, it's relatively hard to explain. You should share site url and the block you want to find the ID, I will help you.

Right, I see. The yui ID isn't static... I think I'll have to figure it out – not a complete newbie, just been out of the website game for a number of years! So many thanks for all your help, if I get stuck I'll reach out :)

hey! i'm also trying to figure out how to target a specific block type. have you had any luck?

On 3/21/2020 at 3:38 AM, casegliidd said:

hey! i'm also trying to figure out how to target a specific block type. have you had any luck?

Try this extension: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

I was  just getting ready to mention the Chrome extension. I use it, its pretty cool. 

yes! thank you!! works perfectly!