# Separate Layouts for Mobile and Desktop
**URL:** https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651
**Category:** Feature Requests
**Created:** [September 1, 2023, 3:35am UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651 "2023-09-01T03:35:39Z")
**Posts on this page:** 15
**Page:** 1
### Author:  [@Randall\_Nichols](https://community.glideapps.com/u/Randall_Nichols)
#### Post date: [September 1, 2023, 3:35am UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651/1 "2023-09-01T03:35:39Z")
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.
---
### Author:  [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [September 1, 2023, 3:37am UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651/2 "2023-09-01T03:37:14Z")
You can do this now by leveraging the Device Info column.
> **[Device Info](https://www.glideapps.com/docs/automation/integrations/device-info)**
>
> Get information about the users device.
---
### Author:  [@Randall\_Nichols](https://community.glideapps.com/u/Randall_Nichols)
#### Post date: [September 1, 2023, 3:49am UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651/3 "2023-09-01T03:49:26Z")
I can change component visibility but I haven’t found how to change the component layout based on device type. Do you have guidance?
---
### Author:  [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [September 1, 2023, 4:02am UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651/4 "2023-09-01T04:02:01Z")
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.
---
### Author:  [@Fair\_Currents](https://community.glideapps.com/u/Fair_Currents)
#### Post date: [October 4, 2024, 5:14pm UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651/5 "2024-10-04T17:14:56Z")
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.
---
### Author:  [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [October 4, 2024, 5:53pm UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651/6 "2024-10-04T17:53:57Z")
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.
---
### Author:  [@Fair\_Currents](https://community.glideapps.com/u/Fair_Currents)
#### Post date: [October 4, 2024, 6:58pm UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651/7 "2024-10-04T18:58:48Z")
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?
---
### Author:  [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [October 4, 2024, 7:30pm UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651/8 "2024-10-04T19:30:27Z")
Yes, that is correct.
---
### Author:  [@Fair\_Currents](https://community.glideapps.com/u/Fair_Currents)
#### Post date: [October 4, 2024, 10:01pm UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651/9 "2024-10-04T22:01:31Z")
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?
---
### Author:  [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [October 5, 2024, 1:31am UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651/10 "2024-10-05T01:31:49Z")
> [@Fair\_Currents](#):
>
> windowWidth
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.
---
### Author:  [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)
#### Post date: [October 5, 2024, 2:10am UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651/11 "2024-10-05T02:10:14Z")
I’ve found that using CSS is a better approach for catering to different device layouts. This is what I use:
```auto
@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.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [October 5, 2024, 3:09am UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651/12 "2024-10-05T03:09:55Z")
How about wrapping it in a container and adjusting the width? Would that still not help?
---
### Author:  [@Fair\_Currents](https://community.glideapps.com/u/Fair_Currents)
#### Post date: [October 5, 2024, 1:38pm UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651/13 "2024-10-05T13:38:37Z")
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.
---
### Author:  [@Fair\_Currents](https://community.glideapps.com/u/Fair_Currents)
#### Post date: [October 5, 2024, 1:40pm UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651/14 "2024-10-05T13:40:30Z")
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.
---
### Author:  [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)
#### Post date: [October 5, 2024, 2:13pm UTC](https://community.glideapps.com/t/separate-layouts-for-mobile-and-desktop/65651/15 "2024-10-05T14:13:48Z")
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