Jump to content

Brine: removing inset from ALL galleries

Recommended Posts

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.

Link to comment
  • Replies 14
  • Created
  • Last Reply

@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;
}


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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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.

Link to comment

@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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
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

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

Contact Customer Care - Learn CSS - Buy me a coffee (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.