Making a Grid View Mobile Friendly

Knack 101 Tips & Tricks
1

When a grid view loads on a mobile the graphic shows how it will render. My question here is whether there is any way I can set a view-port so if seen on a mobile the grid is shown in a vertical column. As there is only ever going to be an average of 1 record in this view I am not too bothered about other records in the grid.

mobile_grid

However, if there were additional records I think it would be good if knack detected this and gave the option on the back end for the grid view to add mobile navigation buttons.

That would essentially load arrows at the top of the column that would allow you to cycle through each record one by one, and when combined with a single column display on mobile, would make a neat way to view multiple records easily on these devices.

G.

2

Hi @GSH

Yes this would be possible if there is only 1 record you could use CSS or JavaScript.

For more than one record it would be a combination of both.

I would suggest that you look at the

@media

In CSS which allows you to do CSS based on screen width.

I’ll give it go myself and post here with results.

I think it’s quite a good idea.

Craig

3

Thanks, I’m not a CSS guy and struggle with this type of stuff, but if you don’t manage to get it to work let me know otherwise I might be able to call in a favour on my CSS guru.

1 Like
4

Have you tried using list rather than grid? I find that it can display the information really nicely and is more dynamic on mobile.

The other thing is to try to use less columns in the grid - keep it simple.