Flatiron - space around each image item in index

My site: www.isissakomadajohn.com

I would like there to be space around each item in my index like in the Wexly template, instead of each item touching on all sides as is default in Flatiron.

I have been using the code below, but it is cutting off part of each image, it seems cropping from the right side and the bottom.

Any suggestions?

/* 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;
 }
}

Add to Home > Design > Custom CSS

#grid .item {
    padding: 20px !important;
    box-sizing: border-box;
}

Thanks @tuanphan that mostly worked! Except when I mouse over specific images in the index, and the color overlay happens, the color overlay is not covering the whole image, and some of the full-color image is peeking through on the right side of each.

Also, the space around each image is not equal.

Thanks for your help!

Isissa

I am referring to the grid background color under gallery styles. the grids over the images are not aligned with the images now that there is border box padding all around each image. any ideas how to fix, @tuanphan?

Hi everyone, 

I am having the same issue. I can add the on padding on the Flatiron template  but the hover state does not match the size of the thumbnails. 

Does anyone have a solution to this? 

Big thanks in advance, 

Gemma 

On 1/3/2020 at 12:14 PM, isissa said:

I am referring to the grid background color under gallery styles. the grids over the images are not aligned with the images now that there is border box padding all around each image. any ideas how to fix, @tuanphan?

Have you solved yet?

On 1/7/2020 at 6:50 PM, gemma1234 said:

Hi everyone, 

I am having the same issue. I can add the on padding on the Flatiron template  but the hover state does not match the size of the thumbnails. 

Does anyone have a solution to this? 

Big thanks in advance, 

Gemma 

Can you share link to your site?

Hi @tuanphan

I've used your code too which works (thank-you!) however the hover state is now not aligned as per above posts.

Could you share any tips?

My website is  - www.stuartwalford.com and the password to view is reno20

Thanks,

Stuart

@tuanphan, I have not yet resolved. I noticed that on Google Chrome it looks fine, but it is on Safari that this issue occurs.

www.isissakomadajohn.com

On 1/10/2020 at 8:29 AM, hellostuart said:

Hi @tuanphan

I've used your code too which works (thank-you!) however the hover state is now not aligned as per above posts.

Could you share any tips?

My website is  - www.stuartwalford.com and the password to view is reno20

Thanks,

Stuart

Have you fixed yet?

On 1/27/2020 at 9:25 AM, isissa said:

@tuanphan, I have not yet resolved. I noticed that on Google Chrome it looks fine, but it is on Safari that this issue occurs.

www.isissakomadajohn.com

I don't use Safari

Need paid tool to check this...

You can create a new question to ask this.

Hello,

I'm trying your code below and whilst it works - some of my images are being stretched. anyone have any knowledge about this? They're fine without the padding but go all weird when I add it.

Thanks,

Hilary. www.hilarywalker.com.au

#grid .item {
    padding: 20px !important;
    box-sizing: border-box;
}

10 hours ago, halker said:

Hello,

I'm trying your code below and whilst it works - some of my images are being stretched. anyone have any knowledge about this? They're fine without the padding but go all weird when I add it.

Thanks,

Hilary. www.hilarywalker.com.au

#grid .item {
    padding: 20px !important;
    box-sizing: border-box;
}

Did you fix?

Hi tuanphan,

I made the site work by using this code instead:

.homepage #grid .item a {
   width: 80%;
   height: 80%;
  
}
section#container {
    margin-left: 115px !important;
    margin-right: -40px !important;
}/* Remove Share Buttons */
.squarespace-social-buttons {
   display: none !important;
}

But while the margins look fine on the desktop - they're all wrong on a mobile. Ideally I need even space around the images rather than space on left, bottom and right whereas this code puts space on bottom and left of each item...

Cheers,

hialry.

I would also like my pages to be centre aligned as my index page is - but all seperate pages are left aligned (unless within the index) Any ideas!? 

On 12/31/2019 at 6:29 PM, isissa said:

Thanks @tuanphan that mostly worked! Except when I mouse over specific images in the index, and the color overlay happens, the color overlay is not covering the whole image, and some of the full-color image is peeking through on the right side of each.

Also, the space around each image is not equal.

Thanks for your help!

Isissa

@tuanphando you happen to have a solution for this? I'm running into the same problem.

On 11/25/2020 at 2:15 AM, ae12345 said:

@tuanphando you happen to have a solution for this? I'm running into the same problem.

Do you still need help on this?