Portfolio grid overlapping on the website load

• 

  ppdsgn · Member · Jan 28, 2021 at 9:34 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  in the Orvis theme, I’m using when the website is loaded for the first time, the images in the portfolio grid are overlapping. As soon as I re-load the page, the order is back normal.

  How do I get the grid to load the images in the right order when being loaded on the first page visit?

  Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  staff-totoro · Staff · Jan 28, 2021 at 11:40 pm

  • Copy link

  Hi there,

  The Orvis theme uses a technique called Masonry to lay out posts in a jigsaw-puzzle-like fashion on the fly. That is why sometimes your portfolio items sometimes show a different order, especially if you compare the desktop vs. tablet vs. phone layouts

  With a theme that uses Masonry to lay out the grid, there isn’t a way to more finely control the post order, as it’s all done automatically by the script. If a specific order in your grid is important to you, you might prefer a theme that doesn’t use Masonry, but instead uses a straight grid like the following:

  – https://wordpress.com/theme/argent
  – https://wordpress.com/theme/sketch

  Hope that helps. Please let us know if you have any more questions.

• 

  ppdsgn · Member · Jan 29, 2021 at 8:33 am

  • Copy link

  Hello,

  It is not an issue with the order of the tiles. When I load the website the first time all the images are stacked and overlapping. After I reload the website they go back to displaying normally.
  The issue was described in this wordpress.org thread: https://wordpress.org/support/topic/grid-doesnt-load-properly/#post-13972637

  It was solved by changing some attributes in the Jetpack that I don’t have access to.
  Is there a way for you to adjust those attributes on your side?

  I have screenshots of that issue if there is any way I can send them.

  Thanks,

• 

  staff-mckluskey · Staff · Jan 29, 2021 at 11:19 am

  • Copy link

  Ah, thanks for that link. I’m afraid that this is a known bug with this theme, related to the image lazy loading feature we offer.

  When you load a website in your browser, all the content has to load before you can see the page. Lazy loading helps with that, improving speed up load times.

  There is no way to disable this feature on WordPress.com sites, so I’m afraid there’s no workaround I can offer. But I’ve added your case to the bug report for this. Hopefully, our developers are able to fix it.