Joomla Templates Club 406,261 posts

[oyvindss Friend oyvindssJoin date: May 2012Posts: 29Downloads:0Uploads:7 Thanks: 3 Thanked: 5 times in 1 posts]

#180275

Hi

When I click the bottom bar to load more items in the masonry overview, I always get some seemingly randomly positioned empty gaps in between the newly loaded items.

How can I fix this?

---

Attachments:

1. 

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#465584

Hi Oyvindss
May be, some items do not contain image. Could you give me url ?

Regards,

[oyvindss Friend oyvindssJoin date: May 2012Posts: 29Downloads:0Uploads:7 Thanks: 3 Thanked: 5 times in 1 posts]

#467143

<em>@HeR0 336238 wrote:</em><blockquote>Hi Oyvindss
May be, some items do not contain image. Could you give me url ?

Regards,</blockquote>

HeR0, I have sent you a private message.

Cool if you get back to me either here or in pm.

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#467159

HI Oyvindss,

I checked on homepage and could see that it is loaded more content. There is an each item with empty image. May be they do not have image in content. Please check that because i can not access to backend for checking further by guest account.

Regards,

[renejdm Friend renejdmJoin date: April 2012Posts: 186Downloads:0Uploads:38 Thanks: 8 Thanked: 12 times in 1 posts]

#467253

Hi,

I have the same problem when you use (ctrl-+ and ctrl–) to enlarge and minimize the website in browsers like FireFox, Chrome, and Safari. Surprisingly IE9 and Opera do not have these problems.

Rene

[oyvindss Friend oyvindssJoin date: May 2012Posts: 29Downloads:0Uploads:7 Thanks: 3 Thanked: 5 times in 1 posts]

#467279

This is how it looks in a 1920×1080 window. The two bottom rows are loaded after clicking the “Load more” bar, and empty slots and/or scrambling always appear here.

In this version it seems to me like the content is aligned to center instead of to the left and this leaves empty slots which content that should actually come later falls into.
See image with markers to see how the sequences are scrambled and where empty slots appear:

I have two groups of items now. The first 21 green ones are loaded before clicking “Load more”. After that, things are immediately scrambled. If the content gets aligned to center, maybe the image that is wrongly placed “falls” up into the empty slot. It also leaves an empty slot where it should be. You tell me what this looks like.

Maybe a CSS fix can adress this? Then, where do I put it?

I also know of the problem renejdm describes, but I don’t know if it’s related. It’s also miniscule compared to this. My problem is consistent in all browsers and appears without any rescaling.

HeR0, if you want, you can login now with the info I gave you. Login problem fixed. Sorry about that.

---

Attachments:

1. 
2. 

[oyvindss Friend oyvindssJoin date: May 2012Posts: 29Downloads:0Uploads:7 Thanks: 3 Thanked: 5 times in 1 posts]

#467286

Actually, I’m backpedaling on the alignement theory. It seems that slots 22, 29, 36 etc. are the ones who become empty and have a later item “falling” into them. Weird behaviour, right?

Here’s an image of the page in a bigger window and with some more items added. You can see the items falling up into wrong slots.

---

Attachments:

1. 

[oyvindss Friend oyvindssJoin date: May 2012Posts: 29Downloads:0Uploads:7 Thanks: 3 Thanked: 5 times in 1 posts]

#467291

Just trying to find any logic in this behaviour, but it’s a bit hard. If you open the page in any window and view it at 100%, the empty slots in which later items fall into are always number 22, 29, 36 etc., but if you zoom in or out, it changes. Mostly still wrong, only at some window sizes and zoom levels it suddenly looks ok. Maybe in the same way a broken clock is right two times per day.

It seems very much linked to the problem renejdm described, because often when I go to higher zoom levels, things get really, really warped around and lots more empty spaces appear.

Just go to my webpage and play around with window sizes and zoom levels and maybe you see a pattern where I don’t. I’m not a proper web designer, so I’m not equipped to figure this out on my own.

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#467320

Hi Oyvindss
Please open file templates/ja_lens/themes/light/css/theme.css then find ( line 249 )

.masonry .item {
background-color: #FFFFFF
border-bottom: 1px solid #DDDDDD
border-right: 1px solid #DDDDDD
color: #000000
}
and try replace to

.masonry .item {
background-color: #FFFFFF
color: #000000
}

Regards,

[oyvindss Friend oyvindssJoin date: May 2012Posts: 29Downloads:0Uploads:7 Thanks: 3 Thanked: 5 times in 1 posts]

#467515

HeR0, that fixes the scrambling and empty slots problem!
(Chrome is still acting up when playing around with extreme zoom levels, but this is not an issue.)

Thank you. But it doesn’t look quite as good without the borders separating them though.
Is there no other apporach I can take to this? I am wondering if this is something that is plaguing others as well in the Light Theme.

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#467576

Hi Oyvindss,

No worries as it is not plaguing in the Light theme.

Regards,

[Author]

Posts