Perspective - Breakpoint with different view heights and widths

[john.eichler]

Hi All

I would like to display a large, multiplot historical chart view when the page is viewed on a large screen. When a mobile phone is used, I would like to display a gauge only. I have set this up using a breakpoint container. The two views have significantly different heights (the chart needs a minimum height of ~500px)

My setup works but if the user turns the phone to landscape orientation, a vertically squashed view of the chart is shown. If I configure a suitable minimum height for the breakpoint container, the chart works but when on small screen mode, the gauge is either massive or has lots of space around it. I’ve played around with the breakpoint for the container with no progress.

I’m currently playing with a breakpoint container within a flex container.

What is the preferred method for switching between two views (with significantly different sizes) based on screen size? Do I just make the visibility dynamic?

Cheers.

[Alejandro_Alaco]

For responsive design, I personally like using Column Containers as the base layout, and then placing Flex Containers inside them — sometimes with more Column Containers nested inside.

Something like this:

Column Container
 └── Flex Container
      └── Column Container

In each column breakpoint, you can choose a completely different layout, so every element can take up a different number of columns depending on the screen size.

One limitation I’ve found is that you can’t really change the height of an element — the height will always stay the same, you can use % altough. That’s a bit of a downside in my opinion, but I’m sure there’s a workaround if you really need one.

If you want to hide an element at a specific breakpoint, just set its span to 0.

You can also customize the breakpoints depending on the devices your users mainly use, which gives you even more flexibility.

Cheers