All Collections
Create your site
Mobile
Custom grid tile ordering on mobile
Custom grid tile ordering on mobile
Ashmita Taneja avatar
Written by Ashmita Taneja
Updated over a week ago

Sometimes it can be hard to arrange the grid in a way that works well on both mobile and desktop. To make this easier we have a feature for changing the ordering on mobile with the "Mobile Order Priority" setting.

By default, the mobile grid will follow the desktop grid left-to-right, top-to-bottom. You can override this ordering for a tile by changing its "Mobile Order Priority" setting in the "Settings" tab.

By default, all tiles have a value of 0. Giving a tile a value of 1 would give that tile order priority compared to all tiles with a value less than 1. Conversely setting the value to -1 would give all tiles with a value above it a priority. You can set the value to any number you like, higher priority tiles will always be displayed before lower priority tiles.

Example

To make this easier to visualize let's have a look at an example grid. Consider the three-tile grid below:

By default, this order will be maintained on mobile. For the sake of readability let's abbreviate each tile by its letter. The order you can see above is written as [A - B - C]. With no priorities set this ordering would be the same on mobile like below.

If you want the tiles to display in the order [B - A - C] on mobile all you would need to do is change the priority for B to 1. It would then have a higher priority than the other tiles and display first.

Since the order for A and C is still determined by the desktop grid, if we change the desktop tile order as in the image below:

The new ordering on mobile would become [B - C - A]. The priority of B is still higher than A and C. Since A and C have the same priority they will reflect the order in the desktop grid.

Since tiles with the same priority always maintain the desktop ordering if we change the priority for C to 1 as well, the new order would be [C - B - A]. You can think of each number as a group and these groups are always displayed from highest to lowest.

Conclusion

Mobile Order Priority is useful when you need the grid to look slightly different on mobile. Any changes in the desktop layout will still be reflected on mobile for tiles with the same priority.

Did this answer your question?