Jump to content

Flatiron: Spacing Between Gallery Items, Images Off Center

Recommended Posts

Site URL: http://tylerelise.com

Hi there,

I'm currently using this code in the custom CSS for my website to get the gallery images to have 8px of space between them:

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

The issue I'm noticing is that the images now sit towards the bottom right corner and are off-center in the box. I've attached an image of what this looks like in edit view, you can see the content is sitting towards the bottom right of the container. It seems like something is effecting the right margin within the code (I've also attached a screenshot from the inspect view to show this). I'm wondering if maybe because it's a white border and not a margin the borders to the right of each image are now covering 8px of its neighboring image?

Any help would be appreciated, thank you! 

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

Screen Shot 2021-08-19 at 1.50.42 PM.png

Edited by tylerelise
adding info
Link to comment
  • 8 months later...
  • Replies 7
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

On 8/19/2021 at 1:51 PM, tylerelise said:

Site URL: http://tylerelise.com

Hi there,

I'm currently using this code in the custom CSS for my website to get the gallery images to have 8px of space between them:

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

The issue I'm noticing is that the images now sit towards the bottom right corner and are off-center in the box. I've attached an image of what this looks like in edit view, you can see the content is sitting towards the bottom right of the container. It seems like something is effecting the right margin within the code (I've also attached a screenshot from the inspect view to show this). I'm wondering if maybe because it's a white border and not a margin the borders to the right of each image are now covering 8px of its neighboring image?

Any help would be appreciated, thank you! 

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

Screen Shot 2021-08-19 at 1.50.42 PM.png

I'm having the same issue. Is there an answer out there? 

Link to comment
  • 1 year later...

Hi @tuanphan I didn't solve it. It's barely noticeable at 8 px so I kept it at 8. But I'd love to have more space between items. This is what 40 px spacing looks like (my preferred spacing), and the issue is pretty clear. The images don't shrink accordingly, and get cut off in the bottom right.

image.thumb.png.3e8ba1f2895f734c05da5d4fabca5a82.png

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.