Mobile responsiveness and tile ordering

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

Let’s talk about mobile responsiveness. To do so, let’s look at an actual site. For today’s call I picked our template for an onboarding portal for Denver tech. Just a quick note, Denver tech is a fictitious company that we’ve made up.

How does mobile responsiveness work in Zoomforth?

By default, everything renders from top to bottom, left to right. What does that mean? If we were to look at our site in mobile view, we would have our hero, then our image, and then the Denver tech text tile. So that works quite well here. But sometimes, depending on how you organize your content on your site, that order might not make sense.

Ordering your content for mobile responsiveness

If we look at the section Acme and its market, and if we scroll down to this section here, Latest News. Let’s think about what I just said, default order top to bottom, left to right. That means we would have the first image, then the second image, and so on. Then our copy doesn’t make a lot of sense because our image goes hand in hand with the copy. There are two ways you can work around that.

You could have an image that has a caption so it’s grouped together. But what if you had an image tile and then a text? The order is not going to work on the mobile view. Switch to the site editor so we can see the mobile preview, and let’s jump to the page we were on, Acme and its market. The order is, latest news, image, image, and then our copy. That doesn’t make sense.

To overcome this issue, the engineering team has come up with a really neat feature that allows you to reorganize the order of your tiles on mobile.

How does it work?

Go into the appropriate grid section that you’re trying to reorganize and click on any of the tiles. You’ll see on the left-hand panel we have a new tab called settings. This is where we want to go 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. So let’s go through our example and reorganize things, looking at my grid. How many tiles do I have? I have ten. So I’m going to click on the first image that I’d like to appear on my mobile view, and I’m going to assign it a value of ten because that’s the highest. Then if I wanted the copy to appear next, what would I do? I give it a nine. We want this image of Singapore to be next, I’m going to go ahead and assign it to eight.

Why? Again, we have ten tiles. The higher the value, the higher the order. We’ll do that quickly for all of our tiles all the way down to 1. Now let’s check our preview and see if we got it right.

Let me scroll, and here we go. I just had a question coming in. “When we’re numbering tiles, can we use negative numbers?” Yes, you can, because this is really just a value system. So in my mind it makes a lot of sense to go from the highest number to the lowest. And for me, the highest in my head is 10, but it could work the other way around. You could decide that the first picture has a value of zero and then -1, -2, and -3. You can decide that you’re going to use completely random numbers. You can decide the first image is going to be 50 and then 40, 30, and 20. That works because think of it like you’re assigning a weight to it. The higher the number, the higher the order of importance. But that doesn’t mean you need to follow the number of tiles you have in your grid section.

How to remove white space in the mobile view

Zoomforth’s new grid system and that we can now go up to 30 columns. So that’s great because it allows you to be more creative. Something you might want to do, here and there, is add a placeholder tile to push a tile up or down or just create more separation. The problem is that it can create some unnecessary spacing on the mobile view. So this is an example that I put together to illustrate that point.

In the subpage, key people, we have our supporting team and then there are two other teammates. I didn’t want everything to be squished. I didn’t want my section to be too packed, so I added a transparent textile in between. I could have also used two separate grid sections, but for the purpose of the example, I used a transparent tex tile. Now, if we check out our mobile preview you can see we have Allen, and then we have a bit of space. Michael is okay. But Cui, can you see that this spacing is wider than below Allen and Michael? It’s not dramatic in this example, but it is still a bit annoying, right? Because what is one of the design principles that we keep mentioning over and over is consistency.

Adding CSS code to hide a tile on mobile

There’s a very quick fix to do that. It’s just a CSS code that you can add to hide a tile on mobile. Remember in Zoomforth, there are two ways you can add custom coding to a site. The first one is we could do it at the theme level, but the problem with that is any code we introduce would then apply to all sites using that specific theme. The other way to do it, which is safer because all of you have accounts where there’s a bunch of people working in it, is to add the code at the site level.

So go to styling, and you want to go to local site styles and click on edit. This is where we’re going to plug in our code. So for this one, I have it open on my computer, and I’m going to copy-paste the code. The code says if it’s mobile, hide it. This is the CSS class that it’s creating. Remember that for any given page, section, or tile, you can add what we call the CSS class. To think about it in a simple way, it’s just a tag you can add to call in some code that has been added in the back end.In the CSS class box, we are going to add the text Hide on mobile. I applied it to this tile only because this is the one that I want to hide. Now, if we go back to our mobile preview and we scroll back down, we removed that space.

Quick tip

I always tell people, put a video in your hero. It makes your site a lot more engaging from the get-go. The only thing to remember is that videos don’t render on mobile for the hero. So just be sure when you do that to assign them an image. If we go to the home page and I click on my hero, you can see the background. We have the video, but then it also asks you to assign a background for the mobile view. So that’s a quick side note because I’ve seen a couple of times that people forget to assign an image.

Removing white space between two sections

Sometimes when you have two different sections on the mobile view, you can have a gap. So I’m going to give you a quick code that you can apply to remove that space.

Same steps as before. I’ll stay away from the theme because I don’t want to mess up anybody else’s work. Go into Styling, Edit Sites, and CSS, and add my code. The CSS class is No space - top mobile, very descriptive. So let’s go back to that section where we found the gap.

The white space we want to remove is between our copy and then our button. So I’m going to click on my section, left-hand panel, and CSS classes and type that tag that we created which was No space - top mobile. Now let’s go to the mobile preview and see how it looks. The gap has been removed.

Depending on how your site is set up, it might vary. Let’s go back to the Site CSS it says, if it’s on a mobile layout, remove the space at the top. That space is controlled by the value of the margin. That’s the value you want to play with on your sites to reduce the space. Depending on how the site is set up, you might want to put the number up or down. I’m going to put it at seven. We save, and we’re done.