Masonry Grid Responsive Order

[NMC]

Hi

It seems that the masonry grid reorders the post order as the browser width changes.

See here

If you gradually drag the browser smaller, the posts don’t keep the same order left to right.
Please note all my posts are the same height.

My Issue
Above 1440px width its fine:
1 2 3 4
5 6 7 8
9 10 11 12

Below 1440px it changes the order
1 2 3 4
5 7 8 6
9 11 12 10

And the last row creates a gap:

21 22 -GAP- 23

Hope you know what I mean.

[NMC]

Please see the screenshots from Chrome’s inspector to see the incorrect order.

1. Is wider than 1440px and the order is correct.
2. First row is right – green
Second row swops column 2 and 3 -red

Attachments:

You must be logged in to view attached files.

[Radu]

Hello,

This is how masonry works by default.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[NMC]

Thanks for the comment, thought there might be an easy fix in jquery (In case the post height/width ever differs).

I just changed the class ‘post-item’ to ‘col-lg-3’

[Radu]

Thank you for posting .

Have a nice day.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts