Flatiron: Spacing Between Gallery Items, Images Off Center

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! 

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! 

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

On 5/14/2022 at 3:30 AM, donaldely said:

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

What is your site url? We will try take a look

Hi, I'm having the same issue too! Is there a solution for this grid problem?

On 2/19/2024 at 5:26 AM, alym said:

Hi, I'm having the same issue too! Is there a solution for this grid problem?

If you share link to page where you have problem, we can check easier

6 hours ago, tuanphan said:

If you share link to page where you have problem, we can check easier

 

Hi Tuanphan, my link is here: https://aly-miller.squarespace.com/food-illustrations

Thanks for looking into it!

On 2/20/2024 at 10:07 PM, alym said:

Hi Tuanphan, my link is here: https://aly-miller.squarespace.com/food-illustrations

Thanks for looking into it!

I tried hover some items and all look fine. Did you solve it?

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.