Flatiron Gallery - Space between projects

Hi,

I would like to know if it's possible to have some space between projects in the gallery of Flation. (Like the Wexley template)

Thanks a lot!

Jany

Hi Paul,

Thanks a lot for your help! It's working, but I still have one issue... is it possible to get a margin also on the right?

Here is my website if you one to take a look :www.janytremblay.com

Thanks again!

Jany

Hi Paul,

Thanks a lot for your help! It's working, but I still have one issue... is it possible to get a margin also on the right?

Here is my website if you one to take a look :www.janytremblay.com

Thanks again!

Jany

Hi Paul,

Thanks a lot for your help! It's working, but I still have one issue... is it possible to get a margin also on the right?

Here is my website if you one to take a look : www.janytremblay.com

Thanks again!

Jany

Hi Jany

If the margins on the left and right aren't equal it's because you've changed the numbers. The margin-left should always be (negative) half the border/wrapper margin value. So if you change line 5 to 16px, you need to change line 3 to -8. I hope that helps.

Paul

Yes that helps! Thanks!

I still have one question, is it possible to have the same amount of white with the margin and the border? I mean, have 16px all around the projects?

www.janytremblay.com

Thanks,

Jany

Yes, it bugged me too. I've amended the answer above so that there's the same around each image, including the sides :-)

@paul2009

I tried to use your CSS and it works but on some photos there's a little Vogue logo down below that gets cut off now. How can I fix this issue?

And is it also possible to add the same amount of white border at the end of the site?

Screenshots attached

(www.sarahkoester.com)

I just wanted to say thank you Paul! this worked for me. 

www.doniastudio.co

On 3/30/2021 at 8:58 PM, keshnadonia said:

I just wanted to say thank you Paul! this worked for me. 

www.doniastudio.co

Just want to say your site has a huge title on mobile.

You can add this CSS to reduce its size

/* project title */
@media screen and (max-width:640px) {
.project-title h2 {
    font-size: 18px !important;
}
}

Thank you! 

Hi! Thanks so much for this, I'm noticing when using this code that the gallery images are a bit off-center now. They're skewing towards the bottom right corner. Any idea on how to fix this? I've attached the link to my website below for reference as well as an image that shows what it looks like in edit mode, it looks like the images are sitting at the corner of their respective boxes, not sure if this is what's causing the issue. Thank you! 

https://www.tylerelise.com/

On 8/16/2021 at 5:32 PM, tylerelise said:

Hi! Thanks so much for this, I'm noticing when using this code that the gallery images are a bit off-center now. They're skewing towards the bottom right corner. Any idea on how to fix this? I've attached the link to my website below for reference as well as an image that shows what it looks like in edit mode, it looks like the images are sitting at the corner of their respective boxes, not sure if this is what's causing the issue. Thank you! 

 

https://www.tylerelise.com/

Hey, Paul, I'm getting the same problem as tyler. When inserting the code it crops the right and bottom portion of the thumbnail. Is there a way to add spacing without cropping the imagery?