Most of the time, the shared layout and breakpoints between mobile and desktop work fine. But there are times when being able to customize the layout for each breakpoint would be so much better. Would LOVE the option to control the layout and component visibility independently based on viewport.
You can do this now by leveraging the Device Info column.
I can change component visibility but I haven’t found how to change the component layout based on device type. Do you have guidance?
ah, you mean things like changing the way that multi-column containers behave? For example, forcing two columns to be side by side in a mobile view. No, I’m not aware of any way to do that. Perhaps with CSS, but I wouldn’t consider that a practical solution.
Wanted to add to the feature request with a real world example. I have a phone layout, at the top of which is an image. Under the image (which is a graph of data) I have a table of the same data. Some users prefer the graph, others like the table. I show both.
When displayed as a desktop, the image scales to the width of the layout and the table disappears off the bottom of the screen. I’d love to be able to do something like - if desktop then scale image by half. I want the data presentation of my app to look the same in both layouts.
As mentioned above, you can leverage device info in a column in your table. You can use it to get the screen width and then use the screen width hide or show different components. That way you can have two image components and show each one based on the screen width. The cutoff width is up to personal preference. Some use 500px. Some use 600px. And I think I recall some going up to 750px to differentiate between mobile devices and desktop. Something you can play around with.
So if I’m following correctly, you’re suggesting having 2 images, one with size set to full the other with size set to small. Then use visibility to toggle based on layout. Did I get that right?
Yes, that is correct.
So I tried using it and I suspect it works, but I can’t verify in the Glide IDE. It looks like the Device Info Device Type returns the kind of machine the IDE is running on so using that for a Windows / not Windows visibility switch can’t be verified in the IDE. So I thought I’d use the aspect ratio of the app. Seems like whatever I do to the IDE - change the browser window size, switch layouts - the screenHeight and windowHeight don’t change at all. Neither do the screenWidth or windowWidth. What am I doing wrong? What are the screen and window dimensions actually reporting?
Use this.
Have you published the app and tried it there, or resized the app emulator inside the builder, or switched between mobile and desktop view inside the builder?
You can also verify screen width by adding a text component to the screen to see what the value is.
I’ve found that using CSS is a better approach for catering to different device layouts. This is what I use:
@media only screen and (min-width: 640px) {
.mobile { display: none; }
}
@media only screen and (max-width: 640px) {
.desktop { display: none; }
}
The problem with using Device Info is that it doesn’t recalculate when the screen width is adjusted, without a refresh.
3 Likes
How about wrapping it in a container and adjusting the width? Would that still not help?
I have the Maker plan, so I can only publish one app at a time. I don’t want to touch the one in production to test the one in development. But I did think of that.
I have resized the app emulator inside the builder and switched between mobile and desktop views. The numbers never seem to change.
I can’t seem to get it to recalculate at all, not matter what I change.
Can you tell me what the 4 values are measures of? What is meant by screen width vs window width, screen height vs window height? This is ambiguous in the context of the IDE.
After adding the CSS under settings → appearance have you tried adding the word mobile or desktop for the CSS class of a component? You can find the CSS class for a component under its options