Gaps in masonry gallery - Support | Kriesi.at

Viewing 21 posts - 1 through 21 (of 21 total)

Author

Posts
August 15, 2017 at 9:32 am #839130

ccyran
Participant

Hey guys,

Currently I have my Masonry Gallery with no gaps
http://www.ccyran.com/work

but every now and then or when the browser is at a certain width, there seems to be glitches that create 1-2px gaps. Can you fix this?

Here’s an image for reference: https://ibb.co/fxMs1a
It’s noticeable under the 4 project thumbnails on the right.

Thanks!
Chris

August 18, 2017 at 6:35 am #840756
Ismael
Moderator
Hey ccyran,

Thank you for using Enfold. Awesome Snoop Dogg loader.

Increase the width of the masonry container to create more space for the items. It will overflow outside the browser but it’s barely noticeable.
```
.av-masonry {
    width: 100.5%;
}
```
Best regards,
Ismael
August 19, 2017 at 4:04 am #841116

ccyran
Participant

Hey Ismael,

Thanks! I tried adding that but it still looks the same :/
it happens upon page load. But fixes if the browser gets wider or smaller.

August 21, 2017 at 6:45 am #841862

Ismael
Moderator

Hi,

Please adjust the value as needed and use additional css media queries if it’s still happening on smaller screens. Don’t forget to remove the browser cache after every update.

Best regards,
Ismael

August 21, 2017 at 6:51 am #841865

ccyran
Participant

Hey Ismael,

I tried that but it doesn’t fix the gaps, it just makes the thumbnails on the gallery cut off. It happens on every screen that isn’t mobile. Regardless of the browser size.

Can you suggest another CSS fix?

Thank you,
Chris

August 22, 2017 at 7:56 am #842348
Ismael
Moderator
Hi,

It is working on our end. What is the screen resolution of your monitor? What browser are you using?
```
.main_color .av-masonry {
    width: 102%;
    margin-left: -1%;
}
```
This is a screenshot from a 1920x1080px monitor after adding the modification.

// http://imgur.com/a/FLh3W

Best regards,
Ismael
August 29, 2017 at 8:53 am #845234

ccyran
Participant

Hey Ismael,

Apologies for the delay. I thought I responded.

I tried the CSS above but Im still seeing it. It happens in any browser I view. Currently Im looking at it from Chrome and Safari. Here are recent screenshots that show the issue:

Chrome:
https://ibb.co/etR8P5

Safari:
https://ibb.co/irA2j5

The issue is fixed as soon as the browser width is adjusted, but it definitely appears on page load.

Thank you,
Chris

August 29, 2017 at 8:58 am #845235

ccyran
Participant

Hey so I found whats causing the issue!

This CSS I got to fix a previous issue is causing it:

#top .av-masonry-container {
float: none;
margin: 0 auto;
}

Link to previous issue:
https://kriesi.at/support/topic/fullwidth-masonry-gallery-not-centered/

Can you fix this CSS while preventing this current issue I have?

Thanks!
Chris

August 30, 2017 at 7:54 am #845657
Ismael
Moderator
Hi,

Thank you for the update.

Replace it with the following css code.
```
.av-masonry-container {
    width: 100.4%;
    float: none;
    margin: 0 auto;
}
```
Best regards,
Ismael
August 30, 2017 at 7:57 am #845660

ccyran
Participant

Hey Ismael,

Just tried it, no luck :/

September 1, 2017 at 9:03 am #846703

Ismael
Moderator

Hi,

Why do you need to center the masonry element if it’s already full width? I don’t see any changes to the site when I remove the previous code.

Best regards,
Ismael

September 1, 2017 at 1:35 pm #846848

ccyran
Participant

Hey,

I need it centered because I want to stop it from going fullwidth after 1600px.

I have the CSS for that:

.av-masonry-container {
max-width:1600px !important;
}

but when I use it, it creates these gaps in the masonry gallery. I took off the CSS for now until it could be fixed.

September 4, 2017 at 8:31 am #847563

Ismael
Moderator

Hi,

What is the screen resolution of your monitor? The suggested css modification is working on our end.

Best regards,
Ismael

September 4, 2017 at 7:39 pm #847867

ccyran
Participant

Hey Ismael,

Currently. I’m on a Macbook 13″ retina display. it happens on other screens I look at as well. Currently, I removed the CSS provided so the issue doesn’t appear.

September 7, 2017 at 3:39 am #848920
Ismael
Moderator
Hi,

What happens if you increase the max-width value?
```
.av-masonry-container {
max-width:1601px !important;
}
```
Best regards,
Ismael
September 7, 2017 at 3:44 am #848924

ccyran
Participant

Hey Ismael,

Same issue. Here’s the css I tried:

.av-masonry-container {
max-width:1601px !important;
}

.av-masonry-container {
width: 100.4%;
float: none;
margin: 0 auto;
}

What happened (screenshot) : https://ibb.co/faLQzF

September 7, 2017 at 5:25 am #848947

Ismael
Moderator

Hi,

Please increment the max-width value until it creates enough space for the columns.

Best regards,
Ismael

September 7, 2017 at 6:24 am #848953

ccyran
Participant

hey Ismael,

To clarify, Im not trying to create a gap, I’m trying to remove it. I’ve tried incrementally increasing the max-width value but with no luck. You can close this thread.

Thank you,
Chris

September 8, 2017 at 8:25 am #849468

Ismael
Moderator

Hi,

To clarify, Im not trying to create a gap, I’m trying to remove it. I’ve tried incrementally increasing the max-width value but with no luck. You can close this thread.

Yes, I know. You can see the gaps because there are not enough space for the masonry columns. You have to increase the main masonry container.

Best regards,
Ismael

October 30, 2017 at 4:13 am #870287

ccyran
Participant

Hey Ismael,

What do you mean by that? Apologies. And as a reminder about this issue, its the random 1px gaps that appear between thumbnaiils on this page…

Work

November 2, 2017 at 3:41 am #871490

Ismael
Moderator

Hi,

I can’t reproduce the issue even if I zoom the browser in and out. Please increase the masonry container’s max width value if you can still see the spaces or gaps.

Best regards,
Ismael
Author

Posts

Viewing 21 posts - 1 through 21 (of 21 total)

You must be logged in to reply to this topic.