Skip Navigation

[Closed] Overlapping photos on initial load on small screens

This support ticket is created 3 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 9 replies, has 2 voices.

Last updated by Christian Cox 3 years, 9 months ago.

Assisted by: Christian Cox.

Author
Posts
#1689905

I just noticed this with the gallery block. If I have a grid gap set between images, on initial page load on mobile the images overlap as shown in the uploaded screen shot. Once you scroll the images align properly with the right grid gap.

hidden link

It seems to be caused if the SG Optimiser plugin is set for SIteGround and the lazy load is on for mobile. Turning off the lazy load fixes the problem but means I will lose the benefit on this page.

hidden link

#1690391

Just another observation. When adding various masonry galleries with a different number of columns per grid, setting one to two can also set another one previously set to three to two as well. I eventually figured out that going out of the template and opening it again between adding galleries solved this.

As you can see I managed to set up 7 masonry galleries. Some have two columns, others have three.

hidden link

I currently have the lazy loading for mobile off in SG Optimiser plugin, but would like it on, at least for the rest of the site.

#1690737

Hello, I'll be glad to take a look. I split your masonry column count observation into a separate ticket so we can investigate that as a separate issue. Can you include the screenshot you mentioned, and possibly turn on the lazy load so I can debug the issue? I'm testing on mobile and don't currently see any overlap, and I want to make sure I understand the problem you described.

#1691141
IMG_1617.jpg

Ok, Lazy load is on and here is the screenshot from my mobile. I just noticed the first time it was a big png. A smaller JPEG this time.

From this, you will see what is happening. It is only after you scroll that the image sit properly.

I did notice that after I added all the other galleries that the loading over the whole page was not great the image galleries as you scroll first appear with image over laid and then adjust after a second or two. It's not a great look. It may be that there are just too many images to deal with on one page. Also could be how I am seeing it load here with 3.8Mb internet. I am in Dublin later today and will check on the local WiFi.

I do like the look but if I can't get it to load nicely I might revert to doing something different with just Divi image modules.

#1691497

Hi Chrisitian,

I have found the Sensei Divi modules that has a masonry Gallery very like the Toolset solution. It loads a lot smoother and I can get it to show captions in the Lightbox overlay. I am away from my computer till late tomorrow so I can leave the Toolset version on the Gallery page till them If you want to test it out/see if you can find a solution.

#1692299

I'm not really able to replicate exactly what you're describing so I haven't been able to come up with a decent CSS fix. When I use a simulator to slow down download speeds to low tier mobile like 3G, I see some overlap in the images until the masonry gallery scripts are loaded. But then everything snaps into place as expected, I don't have to scroll or anything. On my actual iPhone device with 4G LTE or Wifi there's really no noticeable delay. I don't have to scroll like you're describing in any case...what phone are you testing with? I can see it's an iPhone but what version?

Also the Test Page at /test-page doesn't look like the screenshot you shared, so I'm confused.

#1693169

The screen shot is of the Toolset version on :

hidden link

The /test-page/ version is using the Sensei plugin that has a Divi module for masonry gallery. The way I have it configured makes it look exactly like the Toolset version.

The loading issue for Toolset may on ly be an issue with Divi theme. I built most of the page in a content template using the block solution and then put it on a Divi page using the template shortcode in a Div text module.

I will be using the Sensei plugin because it seems to work more smoothly for me at this stage.

#1704513

Understood. Since you've found a desirable replacement and I'm not able to replicate the issue in a way that will allow me to debug the problem, I suggest we close here for now.

#1704859

Thanks Christian,

I might be back again as I see that the Sensei Battle Suit plugin has not been updated in a while and it is outputting some debug info on one of the settings in the Divi Theme Options. I have a support ticket to the developer to see f this will be fixed and the plugin updated. For the moment the Sensei Masonry Gallery but I will need to keep an eye on it and find an alternative if it isn't updated and starts causing problems.

We'll close the ticket for now but can I ask, did you test the Toolset masonry gallery in Divi? I was using it by short-code in a Divi text module.

#1709233

did you test the Toolset masonry gallery in Divi? I was using it by short-code in a Divi text module.
I'm not sure I follow your question, sorry. I tested whatever you had here: hidden link
I'll reopen the ticket so we can discuss in more detail if you'd like, or you can resolve again.

The topic ‘[Closed] Overlapping photos on initial load on small screens’ is closed to new replies.