Jump to content

Flatiron - space around each image item in index

Recommended Posts

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

 

Edited by isissa
Link to comment
  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

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

Edited by isissa
Link to comment
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?

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
  • 3 weeks later...
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.

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
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;
}
Link to comment
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?

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

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.

Link to comment
  • 9 months later...
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.

Link to comment
  • 2 weeks later...
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?

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

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.