Wouldn’t it be nice if you can create just one dashboard in Home Assistant that works fine for your desktop, tablet, and phone so that you do not have to create multiple dashboards for each device? This technique is called responsive design and it can be done in Home Assistant! I will show you how to set up a responsive dashboard in Home Assistant in this tutorial now.
⭐⭐⭐ NOTE: ⭐⭐⭐
This article accompanies a YouTube video. I wrote it for people who would rather read than watch a video. To keep doing this, I would like to ask you to also check out the video, leave a comment under the video, give the video a thumbs up, and subscribe to my YouTube channel. This means that the video is offered more often to new visitors so that they also stay informed of the latest Home Assistant tutorials.
Thank you for your support!
Ed
What is a Responsive Design?
In one of my previous videos, I showed how you can create the best layout for your dashboard in Home Assistant. What I did not show in that video is that you can use that same technique to create a responsive dashboard in Home Assistant. So, let me first explain what a responsive design is. Basically, it means that the design of a website, or dashboard in our case, automatically adapts to the device that is used to show it. This is kind of a next-level tutorial, but I think it’s really powerful once you know how to use this.
But, before we start, please subscribe to my channel so that I can keep creating these videos for you.
I created this design to show on a desktop or tablet. It shows a header, a messages area, and a content area that is divided into three columns Left, Middle, and Right. And it has a footer to show some extra buttons. If you want to know how you can set up the same design, then watch this video first. The tutorial that you are watching now depends heavily on that video, so make sure you’ve set up your dashboard first using that video otherwise this tutorial will not work! The link is in the description below, or click the card over here.
Tablets and Phones
Now, if you would show this on a tablet in portrait mode or on a phone, this layout wouldn’t work so great. You can either create a separate dashboard for your tablet and phone, but you can also make this layout responsive so that it looks different on each device. In this case, we are going to create a responsive layout so that it shows like this on a tablet in portrait mode. The messages are displayed in full width. The left and right layout areas are shown next to each other and the middle layout area is shown below the left and right layout-areas.
The mobile view on a phone looks like this. The messages are again displayed in full width and the left, right, and middle layout-areas are shown below each other. You can of course show the middle layout area always after the first layout-area, but I want to show in this tutorial that you can place layout-areas wherever you want.
Set up a responsive layout in Home Assistant
Let’s see how we can set this up in Home Assistant! Here you see my tutorial dashboard. It has a header, and currently, there are no messages shown. Below the header, you see the three areas left, middle and right and all the way at the bottom there’s the footer area. Let’s edit this dashboard by clicking on the three dots in the right upper corner and clicking Edit dashboard. Now click the three dots in the right upper corner again and click Raw Configuration Editor. What you see now is the dashboard shown in YAML code. In the previous video where I showed how to set up a perfect layout for Home Assistant, we’ve added the code that you see over here. It defines a header, a messages area, a left, middle, and right area, and a footer area. To make it responsive I’ve added this code.
Code to make it responsive on phones
Within mediaquery, I defined two screen resolutions that should show a different layout. The first screen resolution is for a mobile phone. In my case, it’s an iPhone and that has a width of 390 pixels. So what I’m doing here is that I define the layout for all devices that have a maximum width of 390 pixels. If I use a device that has a screen width of 390 pixels or less, then I show all the layout areas below each other. I defined only one column for the phone layout.
So, the header, messages, left, right, middle, and footermobile are all shown in the same column. You might wonder why I named this area footermobile and not footer. I will explain that later in this tutorial. You can also use the area name footer, but in my case, I wanted to achieve something special which I will show you in a minute.
Code to make it responsive on tablets
Then, I also defined another screen resolution for tablets in portrait mode. In my case, the tablet has a width of 800 pixels in portrait mode, so I use the code maxwidth: 800px here. And if I view my dashboard using a tablet in portrait mode I use a two columns layout. If you want to show one content area stretched over two columns, then I show that area name twice. I first show the header stretched over two columns, and I do the same for the messages. Then I show the original left area in the left column. And I show the original right area in the right column. After that, I show the original middle area stretched over two columns. And I also show the footer stretched over two columns.
You can type the code from the screen, but you can also download the code via the download link in the description below. It will save you time and frustration plus you sponsor me and help to make sure that I can keep creating these videos for you.
Test the responsive layout
Now let’s test this. If I use a Desktop resolution, you see that I see my default layout. When I switch to my tablet in landscape mode, you see that the layout looks the same. I only have to scroll a bit for the footer in this case. That can be solved by tweaking the layout a little, but for now, I’m fine with this. Now I switch to the tablet in Portrait mode and you see that I have a header stretched over two columns. The left and right area are in the left and right column, and the middle area stretches over two columns. The footer stretches over two columns as well. Note that the footer shows one line of buttons. This will be different on the phone view.
When I switch to the phone view, you’ll see that all the areas are shown below each other in one column. When I scroll down, you’ll see that the footer is now divided over two lines. Actually, the header is also divided over two lines, but I used a different card for that, that shows that automatically.
Show or hide cards based on the resolution
Let’s concentrate on the footer for now. What I did, is that I used a grid card for the footer that normally shows 6 cards in a row. But, if I show these six cards in a row on a mobile phone, the names of these cards are not readable anymore and that’s not what we want. This is where that footermobile area that I showed before comes in handy. What you can do is that you can show or hide specific cards when someone views the dashboard on a specific device. So, you can hide cards on a phone that will be shown on a desktop and you can show cards on a phone that will not be shown on a desktop or tablet for example.
Show a different card on phones
And that is exactly what I did here. I created two grid cards. One grid card is visible on desktops and tablets and one grid card is visible on a phone. If I edit the dashboard, you see that both grid cards are shown in edit mode. The second one is a bit hidden, but it is there.
Now, Edit the first grid card and click on Show Code Editor. Now scroll all the way down and you see this code here. What I’m doing here is that I indicate that this card may only be shown in the footer grid-area if the minimal width of the device is 800 pixels. So, this card will only be shown on desktops and tablets. Now edit the second grid card. Click Show Code Editor again and scroll all the way down. You see that this card will be shown in the footermobile grid-area when the maximum width of the device is 390 pixels. So this card will only be shown on mobile phones.
Conclusion
This last option is a bit of a trick and most of the time not necessary, but I still wanted to show you how powerful it can be. I can imagine that this tutorial blows your mind and that you have to let it sink in a little, but just play with it and you’ll understand eventually how it works. Again, make sure that you watch this video first before you start with trying to make your dashboard responsive otherwise you might have a hard time getting it to work. You can also read the manual of the custom layout-card to read more about it.
I was able to create this tutorial for you thanks to these awesome people over here who are my sponsors. I cannot keep creating these videos without your help. Please consider sponsoring me if these tutorials are valuable for you. You can support me through Patreon, Ko-Fi, or by joining my channel. The links are in the description below. And please do not forget to give this video a thumbs up, subscribe to my channel, and hit the notification bell!
I will see you soon.
Bye Bye.