How to order tiles for mobile

Learning objective

By the end of this session, you will be able to:

• Learn about the default view of mobile
• Change the priority value of tiles in your mobile view to customize the order of content

Video tutorial

Video transcript

In this video, we will review mobile responsiveness and tile ordering. So how does mobile responsiveness work in Zoomforth? Let’s look at our mobile preview.

How does mobile responsiveness work in Zoomforth?

By default, everything in Zoomforth renders, top to bottom, left to right. So what does this mean? If we were to look at our site in mobile view, you can see that we have our opening hero section, then our subject header, latest Acme News, and then it goes from, again, left to right, top to bottom. So in this case, we have image, image, and then text and text.

Ordering your content for mobile responsiveness

In the desktop view, you can see that a visitor would appear to look at the text associated with the image because they’re next to each other.

Now, there are two ways to mitigate this. You could update the section as an image with a caption associated with it, or you could use our mobile ordering feature in the editing panel found in the settings tab.

How does it work?

The first thing you’re going to want to do is select the appropriate grid that you’re trying to reorganize and click on any of the tiles.

You’ll see on the left hand editing panel, we have a tab called settings. This is where we want to reorder our tiles. The order will depend on the value you assign to a tile. The higher the value, the higher the order of importance it will appear in your mobile preview.

So let’s go through our example and reorganize things. How many tiles do I have? 1, 2, 3, 4. I have four.

So I’m going to click on the first tile that I’d like to appear on my mobile view, and I’m going to assign it a value of four because that’s the highest in this count.

Then if I want the copy to appear next, I will give it a three. We want to have the image of the office next, so that will be two.

And finally, the last caption, or in this case, text tile as one quick note here. You can use negative figures as this simply is a value system to prioritize which order you would like each tile to appear.

Let’s now preview our new mobile view. Great. Now we’ve aligned our mobile view to how visitors would perceive the desktop image and text tile.

Now you know about mobile responsiveness and tile ordering. Go try to reorder your tiles now for mobile. For more information on how to use this platform, see the next modules in this video series.