-
Posts
-
Hi
I am supposed to create a website for a society of architects (link in private content). As you might know they get especially picky when it comes to precision…. – and actually there we are having a “tiling problem” where none should exist…I am using the blog masonry (perfect manual) with “no space between elements”. For the posts I used the advanced editor.
All featured images measure either 500×375 px (standard),1000×375 px (landscape) or 500×750 px (portrait).
It works well on standard monitors with Edge, Chrome and Opera, only occasionally there are some elements which slightly overlap – horizontally or vertically.With Firefox there are overlaps and even gaps appearing in some places. Funny fact: These problems mostly but not always disappear using the sort options and then clicking on “All” – or in zooming in and out the screen with CTRL & mouse wheel.
Safari shows overlaps and rarely gaps.There are quite a lot articles in the support about this problem, but no manageable solution – enlarging the width of the container does not help.
My questions:
A) What is the reason for the problem?
B) Can you provide a working solution?Thanks a lot!
FabianHey Fabian,
Thanks for contacting us!
I know which issue you mention however when I checked your website on Firefox using 2560x1440px screen on macOS, I could not reproduce it. I attached a screenshot in private content field below. I also resized it to 1920x1080px to check if it is related to screensize but I still could not reproduce.
Have you figured it out already? If not, could you please let us know on which kind of setup we could reproduce it?
Overlap issue is usually related to Lazy Load feature of 3rd party plugins. If you are using Lazy Load on a plugin, could you please try disabling it and check if that helps?
Best regards,
YigitHi Ygit
Thanks for your quick reply. The link to an actual screenshot you will find in the private data.
No, I did not find a solution yet. Personally I tend to the thought that perfection always should be seen as a process but never as some absolute state, although the only fact I wonder about is, that after filtering the page and then clicking on “Übersicht” to show the complete masonry content again, the gaps have disappeared, only occasionally overlaps are still visible.
Is it even possible to create a “perfect” masonry?
Thanks for further information to solve this problem.
Best regards,
FabianHi,
Thank you for the inquiry.
It seems to work better when using images that have been resized based on the actual screen width or resolution. The following screenshot was taken on a monitor with an actual resolution of 2560x1600px but has been scaled, so the effective viewport width is only 1440px.
// https://imgur.com/a/xhuICSC
We just divided the viewport width by the current Column count (5), which results to 288px. This value multiplied by two (to cover retina displays) is the base width of the images. There are no gaps between the images as you can see in the screenshot. Unfortunately, a few of the images still overlap sometimes, but this should not be that visible or obvious once you uploaded the actual images.
You can check your screen’s metrics using the following tool and we also provided the image placeholders that we used in the link above.
Best regards,
IsmaelHi,
Thank you for the information. Gonna check it, test it and so on. It is an interesting problem…
For the moment we might consider this topic as closed.
Thanks again.
Fabian
- You must be logged in to reply to this topic.