Different formatting for different sized screens?

Editing my original question. I found in another thread in the community forums that this can be done by installing an integration, so I went ahead and installed the device info integration. But now how do I use that integration to format my components? I can still use my original example of wanting photos to show on the homepage when viewed on a computer, but not when viewed on a phone (see screenshots).


Do I need to add it as a column to all of my data glide sheets? If so, does that column need to be marked as user specific? Will it only work if the user is logged in? Or will the app be able to tell what kind of device the user is on even if they aren’t logged in?

I think most folks use the screen width for this purpose.
You can decide for yourself where the breakpoint is between mobile and desktop.
For signed in users, you should add the column to the User Profile table, then you will be able to use it anywhere in the App.
For users that are not signed in, you would need to add it to each table where it’s needed.
Because the column is evaluated locally on each users device, it is user specific by definition.

1 Like

I just added it as a column on one of my sheets, and now I’m seeing the option to choose my formatting like you said. Is there a generally accepted formatting that I should use as the break point?

And I would then use the visibility filter and choose that column?

I haven’t used it myself for this purpose, but I’d guess around 300px?
Best is to experiment with different numbers.
And yes, you should use it in a visibility condition on those components you want affected.

Some sources on the “break”:

FreeCodeCamp

GeeksForGeeks

image

W3Schools

2 Likes