Trying to build a desktop version

[Michelle_Pointer1]

When I started on this journey a month ago, I wanted desperately to get my field team a better user experience. I accomplished that. They are loving the maps function and ease of use of the mobile app.

I was under the impression I could build a decent desktop app here as well and I’m just not seeing that as a viable option yet. I have so many questions because right now, all I see is a big blown up version of my mobile app on my large screen with a lot of dead space and funky alignments based on the mobile version I built. So here are my questions:

1. Is there a way to see an editor that shows the entire screen as it would be on desktop? Right now if I switch from phone mode, I see what appears to be an ipad/tablet version that looks nothing like the desktop version so I am having to publish and refresh on a different screen.

2. Is there a way to control the visibility of a layout based on the type of device? I’d like to show data in a more table like format to my desktop users.

3. Is there a way to get components to stack side by side on desktop vs just on top of one another (i’m guessing this answer is no, but it’s definitely a question that keeps me from thinking this is going to be the end all be all option for my business). I’m looking for something like this layout…
   

   

Thanks in advance for the help, you guys have been amazing!

[Darren_Murphy]

@Michelle_Pointer1

Is there a way to control the visibility of a layout based on the type of device? I’d like to show data in a more table like format to my desktop users.

Assuming that you are on a paid plan, you can use CSS for this. 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; }
}

When using the above, it’s a good idea to group your components in containers, and then apply the CSS class to the container, rather than individual components.

@Michelle_Pointer1

Is there a way to get components to stack side by side on desktop vs just on top of one another (i’m guessing this answer is no, but it’s definitely a question that keeps me from thinking this is going to be the end all be all option for my business). I’m looking for something like this layout…

I’m guessing that you are either not using containers, or not using them properly.
Anyway, the answer to your question is yes. Containers can be configured in several ways in terms of number of columns. For example, if you want 4 components side by side, all you have to do is use a 4 column container.

[Michelle_Pointer1]

Thank you! I have been so focused on the phone version, I forgot that there is a column option.

I think my biggest struggle right now is actually just seeing the layout to build it properly. I’m using chrome and I’m only seeing what a tablet version looks like. Is there something I’m missing there to see as I build?

[Darren_Murphy]

[MattLB]

Darren -thanks, this worked as advertised for hiding/showing based on screen size