Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
isissa

Flatiron - space around each image item in index

Question

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

Share this post


Link to post

12 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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 

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0
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.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
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;
}

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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!? 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...