Hi all,
Something that has not worked quite right from the start, has been the grid layout on the Home page for my site: growgreenfertiliser.com/
You will note that the images on the bottom row (third row) slide up into the second row when first going to that page.
However, pressing the refresh button sends all the images to were they are meant to be.
I've ignored it for some time, but I think this behaviour is starting to annoy my client.
Is there a quick (CSS?) fix for this?
Your help is always appreciated.
Regards, Nick

Hi Nick,

Have you tried shrinking the image size so they all load quicker?

tinypng.com/

I'd try this first

Cheers
Paul

Thanks Paul, I've now done that. Problem remains.

Any improvement if you run the slideshow images through kraken.io/?

Thanks Paul,
I had a look and it only offers a 3-4% improvement.
To reduce file size I was thinking perhaps reducing the width of the slideshow images.
What would be the minimum width I could go before the images start breaking up on larger screens? At the moment they are about 1800px wide.

Forgot to ask, where is the depth of the slideshow image set? I might be able to shave a few px off by having images exactly the depth that they are being seen on large screens.

OK, managed to reduce the size of all images in the slideshow, but grid is still not right.
Any other suggestions?

When you say the grid still not right - are you still referring to the time it takes the grid to form?

I don't see a problem other than the time it takes for the content to load

Cheers
Paul

Hi Paul, the time, although a nuisance, is not the problem.
I have attached a screen grab of the issue - you will see that the tiles don't line up correctly and the bottom line is cut off. This occurs when the page first loads, and is fixed when refreshed.

Can I just check do you see this on all browsers?

Yes, Firefox, Chrome and MS Edge

If you don't see it first, go to another page and then press the Home button, it will probably appear then.

Hi Nick,

I see a very quick flash as it animates the content but nothing major

I'm wondering if its because I'm on a large screen or because I'm using a decent internet connection

Are you scrolling down to see the filter or is it on screen when the site loads?

Are you on a decent internet connection? - I'm on a 12mb download speed at the moment

I've tried in the different browsers you mention and it looks ok for me and I don't see that issue even when moving between pages

Cheers
Paul

Thanks Paul,
I have a few different screen sizes and they all show this (see attached).
Perhaps it's internet speed, never really thought about that.
Other than the strange grid, all else is good.

I'll ask Rob to take a look on his screen to see if sees a problem

Cheers
Paul

Hi Nick,

Can you try turning off lazy load in the template settings and see if that helps

Cheers
Paul

The setting is in the lazyload under effects tab

You can turn if off completely for the whole site

or you can add the module to the Lazyload Not Selector as
#grid5 img

or with this you can add the module class nolazy to the module and .nolazy img to the Not selector