Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
undefined

Brine: removing inset from ALL galleries

Recommended Posts

Posted (edited)

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.

Edited by riaskaya
Initial Revision

Share this post


Link to post

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


Share this post


Link to post

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

Share this post


Link to post

@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

Share this post


Link to post

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

Share this post


Link to post

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 :)

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...