Jump to content

Flatiron Gallery - Space between projects

Go to solution Solved by paul2009,

Recommended Posts

  • Solution

Hi

You didn't provide a link to your site so I can't test it for your situation, but try adding something like this to Design > Custom CSS:

/* Flatiron: Add 8px white space between index items */
/* set the white space on each side of page */
#container-content {
   padding-left: 8px!important;
   padding-right: 8px!important;
}
#grid .item {
 margin-left:-8px;
 a {
   border: 16px solid #fff;
   }
 /* Overlay size on hover */
 .wrapper {
   margin: 16px;
 }
}


 

Paul

Edited by paul2009
Imported from Answers

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Hi Jany

If the margins on the left and right aren't equal it's because you've changed the numbers. The margin-left should always be (negative) half the border/wrapper margin value. So if you change line 5 to 16px, you need to change line 3 to -8. I hope that helps.

Paul

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Yes, it bugged me too. I've amended the answer above so that there's the same around each image, including the sides :-)

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 4 years later...
  • 7 months later...
On 3/30/2021 at 8:58 PM, keshnadonia said:

I just wanted to say thank you Paul! this worked for me. 

www.doniastudio.co

Just want to say your site has a huge title on mobile.

You can add this CSS to reduce its size

/* project title */
@media screen and (max-width:640px) {
.project-title h2 {
    font-size: 18px !important;
}
}

image.thumb.png.5620c72fda49d3b46644d0a9eb154444.png

 

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
  • 4 months later...

Hi! Thanks so much for this, I'm noticing when using this code that the gallery images are a bit off-center now. They're skewing towards the bottom right corner. Any idea on how to fix this? I've attached the link to my website below for reference as well as an image that shows what it looks like in edit mode, it looks like the images are sitting at the corner of their respective boxes, not sure if this is what's causing the issue. Thank you! 

 

https://www.tylerelise.com/

Screen Shot 2021-08-16 at 5.32.36 PM.png

Edited by tylerelise
Adding image
Link to comment
  • 8 months later...
On 8/16/2021 at 5:32 PM, tylerelise said:

Hi! Thanks so much for this, I'm noticing when using this code that the gallery images are a bit off-center now. They're skewing towards the bottom right corner. Any idea on how to fix this? I've attached the link to my website below for reference as well as an image that shows what it looks like in edit mode, it looks like the images are sitting at the corner of their respective boxes, not sure if this is what's causing the issue. Thank you! 

 

https://www.tylerelise.com/

Screen Shot 2021-08-16 at 5.32.36 PM.png

Hey, Paul, I'm getting the same problem as tyler. When inserting the code it crops the right and bottom portion of the thumbnail. Is there a way to add spacing without cropping the imagery?

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.