Are you sure it’s not a cache thing?
The markdown card should be 100% width/height of the sidebar grid-area and the inside padding is the custom-layout-card-padding variable in themes
Unless something is intefering with the offset. Another theme perhaps or maybe a modified theme or wrong theme chosen?
Hi Elyisum,
I’m currently facing the same issue.
I purged my cache as Mattias suggested, however it stays the same.
The side bar text is too far left and too high up.
Also should the temperature line automatically break?
I did some poking around and here is what I’ve found. Padding of 0 seems to be inherited from #shadow-root. Here is what everything looks as it sits currently:
If I turn the padding off, it looks like (I think) like we are expecting it to.
I have found at least 8 different ways not to fix this 
Working with shadow DOM is definitely stretching the limits of my knowledge but I am eager to learn it. Any help in troubleshooting this would be greatly appreciated.
It also looks like the sidebar background isn’t being respected but that is a different issue for a different post.
Awesome work @Mattias_Persson . I am truly impressed!
Thanks @CarlitoDurr, I know what’s causing it
#themes
markdown-card:first-of-type = sidebar
markdown-card:last-of-type = footer
you guys removed the footer markdown from ui, so the sidebar gets BOTH the sidebar styles and corona styles
2 Likes
Awesome work Matthias! I am thinking about using some of your great animations in my own design.
However i found an issue with the button card and maybe you can help out.
So i am using one button card, inside of that button card i have put another button card in a custom field. That second nested button card then contains your animation in a custom field… 
custom_fields:
icon_closet: |
[[[
const state = entity.state === 'on' ? 'door' : 'door reverse';
const opacity = entity.state === 'on' ? 'room' : 'room reverse';
Problem is that “entity.state” seems to refers to my first button card and not to my nested button card that contains the entity id i would like to use. Is it possible to change the syntax so instead of refering to entity.state just use any entity_id ?
This should work
const state = states['light.hello'].state === 'on' ?...
Just spent about two hours trying to get this to work and you helped me in like 5 minutes 
Whish i was better programmer. Tack !
Ah, I access some entities that way too. I’m curious, why are you putting a button card inside a button card?
Just for some experimentation. I am using the first button card as a “background/canvas” and then using custom fields to add other cards, in some cases more custom button cards. I am certain there is many ways to do it better. I guess i could just use the picture element card as the canvas or the markdown card as you have done in your design. But why make it simple 
1 Like
Hello. After fighting with the home assistant I managed to come up with what looks good. It’s amazing what you did. Very good work. Thank you so much for sharing it
Can you guide me? Thanks
I sorry for the English. I use a translator.
Thank you @Mattias_Persson for sharing your config with us. Since this now supports responsive rendering, I also ventured to change my previous frontend 
I must say I like the result very much. Simple, beautiful and intuitive.
One little thing is a bit strange for me though. When I call the frontend, the clock of the sidebar is sometimes displayed large like in you Screenshots and sometimes small. No matter if I call it on the desktop or on the smartphone. Unfortunately, I have not yet found the cause. Does anyone of you also have the problem?
1 Like
Hi, it’s in the original post :
Known issues
1 Like
Hello
I have a problem with the mqtt switches.
Only one works and the other two don’t.
I suppose it is a matter of how the squad is assembled.
I’ll pass you the jams in case you see the error. I can’t really find it
Thank you
It worked when I put 3 columns.
The number of columns is used for the number of entities?
action: fire-dom-event
browser_mod:
command: popup
title: Balkong
style:
hui-grid-card:
$: |
#root {
grid-gap: 0 !important;
}
card:
type: grid
columns: 3
square: false
cards:
- type: entities
state_color: true
show_header_toggle: false
entities:
- entity: switch.cuarto_principal
secondary_info: last-changed
- entity: switch.cuarto_milena
secondary_info: last-changed
- entity: switch.cuarto_flor
secondary_info: last-changed
- entity: automation.todo
ui-lovelace.yaml
#################################################
# #
# VARDAGSRUM #
# #
#################################################
- type: grid
title: Cuartos
view_layout:
grid-area: vardagsrum
columns: 2
cards:
- type: custom:button-card
entity: switch.cuarto_principal
name: Cuarto Principal
hold_action:
!include popup/vardagsrum_balkong.yaml
template:
- base
- icon_hue
- type: custom:button-card
entity: switch.cuarto_milena
name: Cuarto Milena
hold_action:
!include popup/vardagsrum_balkong.yaml
template:
- base
- icon_hue
#- loader
switch.yaml
- platform: mqtt
name: Cuarto Milena
icon: mdi:power-socket-de
command_topic: cmnd/tecla_touch_723A/POWER
payload_on: 'ON'
payload_off: 'OFF'
availability_topic: tele/tecla_touch_723A/LWT
payload_available: Online
payload_not_available: Offline
state_topic: stat/tecla_touch_723A/POWER
qos: 0
retain: true
- platform: mqtt
name: Cuarto Principal
icon: mdi:power-socket-de
command_topic: cmnd/tecla_touch_6DFF/POWER
payload_on: 'ON'
payload_off: 'OFF'
availability_topic: tele/tecla_touch_6DFF/POWER
payload_available: Online
payload_not_available: Offline
state_topic: stat/tecla_touch_6DFF/POWER
qos: 0
retain: true
vardagsrum_balkong.yaml
action: fire-dom-event
browser_mod:
command: popup
title: Balkong
style:
hui-grid-card:
$: |
#root {
grid-gap: 0 !important;
}
card:
type: grid
columns: 1
square: false
cards:
- type: entities
state_color: true
show_header_toggle: false
entities:
- entity: switch.cuarto_principal
secondary_info: last-changed
- entity: switch.cuarto_milena
secondary_info: last-changed
- entity: switch.cuarto_flor
secondary_info: last-changed
- entity: automation.todo
Ich love your design !
Would you mind sharing your code?
It would be awesome. Thank you.
above is the git link
Every file I open amazes me. The code you wrote is impressive. I admire you for what you did and for sharing it.
1 Like
Wonderful dashboard! I am slowly translating it and tweaking for my purposes, but for some reason I can’t get the fonts to show correctly:
The font.css file and the fonts themselves are accessible through the browser if I check direct links.
When I inspect elements on the page I can see:
font-family: SF Text
for example, but the fonts are not showing.
To make it even stranger when I tried the dashboard as main one, with lovelace mode yaml, I could see the fonts.
Now I want to have some standard UI-editable dashboards as well so I use your in the following way:
lovelace:
mode: storage
resources:
[ resources listed]
dashboards:
lovelace-tablet:
mode: yaml
title: Tablet
icon: mdi:tablet-dashboard
show_in_sidebar: true
filename: ui-lovelace-tablet.yaml
Does anyone have any idea what am I missing to get the fonts to show correctly? What else to check?