-
Posts
-
On a website (Enfold theme) that deals with student exchanges in Australia, we have more than a hundred descriptions of schools including an image gallery (AV-Gallery). For some time now, I have noticed that in some (not all!) of these galleries, the line grid dissolves. The first line is always complete, from the second line onwards some lines are incomplete. Sometimes there is only one picture left. A good example can be seen here (at the bottom):
This phenomenon occurs with Safari (current version) and to a lesser extent with Firefox. I have never observed it with Chrome.
While researching the causes, I came across this original Kriesi website via the Enfold.manual. This phenomenon of split rows in the gallery also appears there, if you open the website with the Safari Browser:Question: What is the cause and how can the gallery be made fully functional again in all browsers?
Thank you for your help.Hey harst53,
Thanks for your patience I have checked your page and our demo page with Safari & Firefox on a Mac, (Mac v12.6.8 with Safari v16.6) but I didn’t find any issues.
I also check with Windows in Chrome, Firefox, & Edge, just to be sure. I’m not sure why you would be seeing this error, is it every time you load the page or only sometimes? Could you be on a slow wifi network?Best regards,
MikeHello Mike,
thanks for the quick response. Yesterday a friend of mine fixed the bug with the following code:.avia-gallery .avia-gallery-thumb a {
height: 83px;
}The problem is obviously that individual images are fractions of a pixel higher than the rest. The image line interlocks at these images and starts a new line.
Due to the fix, you have no longer seen the problem. However, it is still visible on your own kriesi-website if you view the “Small Thumb Gallery” with an OSX device and Safari:
https://kriesi-dot-at/themes/enfold-2017/elements/gallery/Greetings and have a good start into 2024
HaraldHi,
Glad to hear that you have your site sorted out, but I don’t see the error on our site, as I wrote above.Best regards,
MikeHi,
To add a screenshot please try using an Screenshot service and pasting the image URL in your post.Best regards,
MikeHi Mike,
thanx for the Screenshot Service link. Didn’t know that before.
I now made three Screenshots of the Kriesi-Website (> https://kriesi-dot-at/themes/enfold-2017/elements/gallery/)
– one with an iMac
– one with an iPad
– one with a brandnew iPhone 13They all show the discribed problem on the Kriesi-Website. And to proofe that it is not a problem of my wlan or similar things, my colleagues in Australia see the problem as well. As I told you, I was able to fix the bug on a short perspective, but of course it would be much better if the AV-gallery as such would be fixed.
Yours, Harald
https://img.savvyify.com/images/2023/12/31/osX_safari_imac.jpeg
https://img.savvyify.com/images/2023/12/31/iPadOS_safari_iPad.jpeg
https://img.savvyify.com/images/2023/12/31/iOS_Safari_iPhone13.jpeg
Hi,
Thanks, this is what I see on my Mac with Safari:
I don’t have a iPad or iPhone, but when I use the Safari Responsive Design Mode to emulate a iPhone I do see the issue.
So I have submited a issue report to the Dev Team for them to review and linked to this thread so they can see your screenshots.
Since it is a holiday I’m not sure how long it will take to hear back from the Dev Team, but I will leave this thread open and report back when I hear from them.
Thank you for your patience and understanding and for using Enfold. Happy New Year :)Best regards,
MikeI just talked to my friend who helped me fixing the bug. First he said:
“Most probably you don’t see the problem because you are using an older Safari. I saw it under Safari 17.2.1.”And then he additionally asked an AI to formulate the problem. The answer is as follows:
“When using CSS float: left, elements are placed as far to the left as possible in a container. If these elements have different heights, they can interlock or “stick” to each other1. This is because floating elements do not contribute to the height of their parent element. As a result, if a taller element is followed by a shorter one, the next element may slide up alongside the taller one, causing an interlocking effect. To solve this, you can use techniques like CSS columns, flexbox, or grid layout, or clear the float after each row of elements.”So maybe this might be helpful to pass on to your Dev Team as well.
Mike, thanx for your support. Have a good time in 2024
Hey Harald,
Please try adding the following code to the bottom of the Quick CSS field in the Enfold theme options > General Styling tab
#top #wrap_all .avia-gallery .avia-gallery-thumb a { display: inline-block; vertical-align: top; float: none; }I could see the issue on my local installation on both Firefox and Safari and this code fixed it. Please let us know if it fixes the issue for you too. We’ll add a similar fix in an upcoming update.
Regards,
YigitHi Yigit,
yes, this fix works as well.
The friend of mine who helped me in the beginning to fix the bug gave a comment concerning:
#top #wrap_allHe says, this would limit the fix to galleries lying in #top #wrap_all and he could not see the sense of it. Any explanations on that?
Anyway, things seem to go the right way. Thank you for your help.
HaraldHi,
Glad Yigit was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
PS: All page elements are in #top #wrap_all so this is correct.Best regards,
Mike
- The topic ‘AV-Gallery: line grid incomplete’ is closed to new replies.