How to display Lovelace UI differently on mobile phone and tablet respectively?

[jerrychong25]

Hi all,

I would like to display Lovelace UI on both mobile phone and tablet respectively.

However, I would like to have tablet version display slightly different due to its larger width screen size.

Is there any way I could set such a way?

FYI. TileBoard do have a similar method for achieving this TileBoard Mobile Configuration.

Thanks.

[DavidFW1960 (David)]

Look at the custom-compact-header card

[jerrychong25]

@DavidFW1960

custom-compact-header card

How to use this component to achieve this objective?

Currently I am using it for my top bar.

[daphatty]

As others have stated. use Compact Custom Header. This will allow you to specify views for a specific platform or user.

Compact Custom Header

This project is now depreciated and it’s replacement is Custom Header Compact Custom Header Customize the Home Assistant header and much more! Features: Compact design that removes header text. Per user/device settings. Style & hide anything in the header & the header itself. Dynamically style header elements based on entity states/attributes. Add swipe navigation to Lovelace for mobile devices. Any button can be hidden, tu…

[Nick4 (Nick)]

I know it’s an old topic; bumped on it while searching for something.

Can this not be achieved simply by using different Lovelace Dashboards?
That’s at least how I’m doing it and then on that specific device assign that dashboard to it as default.

[NdR (Andrea Montanari)]

Can you explain me how to do that?

Can you share the code to achieve this result?

Thanks =)

[Nick4 (Nick)]

Ciao Andrea, yes I can.

There is no code: the idea is just to create multiple dashboards and assign them to a specific device.

These are the steps:

• in the HA UI go to ‘Configuration’ => ‘Lovelace Dashboards’ => 'Add dashboard (+ sign bottom-right)
• a new window - the ‘Add new dashboard’ appears and you type a unique title (I have 1 called ‘tablet’)
• after you provide a title and enter/tab to the next field, you will notice that this new title has been used as a URL
• additionally you can choose to make it visible or not in the sidebar and admin only or not.

Now you have an extra dashboard and when you open it, you will get all the entities that you have used.
You can keep them and remove what you don’t need of you can delete them from this dashboard and start from scratch.
Of course you can copy cards over from another dashboard when you edit them or copy the yaml code to a new card, your choice.

I have installed the Custom header mod to tweak my dashboards, have a look at it if you don’t know it yet.

My experience with HA is fairly new and I’m not sure that this is the best way to accomplish this but it works for me (for now) so I’m happy that I have discovered this way.

Nick

[Arthur_Morgan (Arthur)]

Is there a new way to do that now when there’s no Custom Header anymore?
I know there’s already a built in user viability option which is great, but what about default view per a device?

[kajmaj]

You can config more “default” views and make them visible for different users (which means that each device should be a specific user)

[Protechtedd (Andrew)]

Bumping this thread to ask if there are any solutions to this yet?

Here is my scenario: I have about 7 RTSP live camera feeds on a dashboard in Home Assistant. On my desktop computer I want these to show in a 3 column grid, maximizing screen real estate. On my mobile phone though these feeds are too small in a grid, and so I want them to show in a single column on my phone.

I want to avoid creating multiple dashboards to manage just for this purpose.

[jon-daemon (John)]

I need the same thing for a wall tablet. I just need to show the camera feed using a horizontal stack on my computer and a vertical stack on my tablet.
Let us know if there is a way to accomplish that without creating multiple dashboards.

[DavidFW1960 (David)]

custom state switch is what I use:

          - type: 'custom:state-switch'
            entity: mediaquery
            states:
              "(min-width: 1200px)":
                type: entities
                title: MQTT & Wifi Connections
                show_header_toggle: false
                entities:
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff2
                    variables:
                      - device: sonoff1_2914
                      - device_name: Coffee
                      - device_status: coffee_maker
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff2
                    variables:
                      - device: sonoff2_3110
                      - device_name: Toothbrush
                      - device_status: toothbrush
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff2
                    variables:
                      - device: sonoff5_1083
                      - device_name: Garage
                      - device_status: garage_door
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff2
                    variables:
                      - device: sonoff6_3719
                      - device_name: Alarm
                      - device_status: alarm
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff2
                    variables:
                      - device: nodemcu_lounge
                      - device_name: Weather
                      - device_status: nodemcu_lounge
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff2
                    variables:
                      - device: nodemcu_bedroom
                      - device_name: Bedroom
                      - device_status: nodemcu_bedroom
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff2
                    variables:
                      - device: sonoff3_0898
                      - device_name: Office
                      - device_status: xcy_mini_pc
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff2
                    variables:
                      - device: sonoff4_0851
                      - device_name: TV
                      - device_status: tv_switch
              "all":
                type: entities
                title: MQTT & Wifi Connections
                show_header_toggle: false
                entities:
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff1
                    variables:
                      - device: sonoff1_2914
                      - device_name: Coffee
                      - device_status: coffee_maker
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff1
                    variables:
                      - device: sonoff2_3110
                      - device_name: Toothbrush
                      - device_status: toothbrush
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff1
                    variables:
                      - device: sonoff5_1083
                      - device_name: Garage
                      - device_status: garage_door
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff1
                    variables:
                      - device: sonoff6_3719
                      - device_name: Alarm
                      - device_status: alarm
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff1
                    variables:
                      - device: nodemcu_lounge
                      - device_name: Weather
                      - device_status: nodemcu_lounge
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff1
                    variables:
                      - device: nodemcu_bedroom
                      - device_name: Bedroom
                      - device_status: nodemcu_bedroom
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff1
                    variables:
                      - device: sonoff3_0898
                      - device_name: Office
                      - device_status: xcy_mini_pc
                  - type: 'custom:decluttering-card'
                    template: decl_sonoff1
                    variables:
                      - device: sonoff4_0851
                      - device_name: TV
                      - device_status: tv_switch

It also uses the decluttering card but it uses a media query in my case to see portrait or landscape and then uses the correct card. There are other options other than mediaquery you can use too.