A different take on designing a Lovelace UI

For me it does change the font size
Could be a couple of things, either you aren’t using the latest version where the sidebar isn’t markup but instead is a button card, or you might be at maximum font size already (5vw = 5% view width, so if you use a smartphone and the text can’t get any wider, it also won’t change the height I guess?)
Or you might be making a different kind of coding mistake, not sure…

input_number.motion_timeout: i was trying to create a timeout for how long the icon will be blue, but didn’t figure it out yet. so you leave it or try to use it, if you are successful, let me know.

hold_action_light: as name suggests, its the popup card when you press and hold the button. in my case, kitchen lights are actually smart relay(switch) so not useful, but for other lights, its needed.

looked at the post, but doesn’t seem to be the same issue, its odd as the size just changes after 20 seconds of the page being static.

Hi @Mattias_Persson,
you did a great work with that ui!

I always wanted to implement yours and finally made the step to do so.

Sadly I do have problems with the size and scaling on my mobile phone.

On the Samsung S9. It looks like this:

Could you please tell me where I can find the setting to tweak the scaling?

Thanks on advance :+1:
Great job :ok_hand:

Thank you @Giblet for insightful answers and helping out :heart_eyes:

You need to call frontend.reload_themes after editing themes.yaml

Just by looking at your image with inspector open you currently have grid-layouthui-grid-card but themes.yaml targets grid-layout$hui-vertical-stack-card$hui-grid-card

that’s why it doesn’t work for you

if you need help with selectors try out card-mod-helper

What browser/os do you use?

Nobody knows what you’ve edited. Copy paste these styles
https://github.com/matt8707/hass-config/button_card_templates.yaml#L566

If you delete stuff it can get wonky like your image. Your cards have to match the grid.

1 Like

No problem, hope I give the correct answers :wink: if I’m wrong please do correct me
And thank you for making such a great dashboard, Finally have mine the way I want it, now to get a tablet and put it on the wall

1 Like

As @Pablo_Gustavo_Fiscel has mentioned, he’s using an ipad mini with an older version of Safari
According to the internet the the first ipadmini has safari 12.x as it’s latest release
Then we can use the site: "clip-path" | Can I use... Support tables for HTML5, CSS3, etc to see that safari 12 for iOS only supports clip-path partially with the prefix -webkit-
As such, if my suggestion of using -webkit- doesn’t work, I suspect the safari version is to old to support this feature
You could test with a different browser on the ipad see if that changes the result?

Sorry, missed that.

I believe all browsers on ios use safari’s rendering engine so using a different browser will not make a difference


@Pablo_Gustavo_Fiscel have you tried border-radius: 50%?

on a mac - happens both in safari as well as chrome

Hi boys… I don’t understand the reason why my dashboard it’s look like that after update config files, also theme file.
thanks in advance :slight_smile:

Excelent friend. I did not think to use that attribute
Thanks

Yes. I do, but I can’t get the hour size to change.

It could either be that you haven’t updates everything and are still using the markdown sidebar instead of the new button cards, might want to compare the button_card_templates.yaml you have to the one posted by matthias on github

or you might need the fix from A different take on designing a Lovelace UI - #1633 by wjbridge

Could you check your template.yaml file somewhere around line 12-17, maybe you are missing the <span class="time">

          {% set hours = now().strftime('%H') %}
          {% set minutes = now().strftime('%M') %}
          <span class="time">
            {{ hours }}<span class="time-colon">:</span>{{ minutes }}
          </span>

thanks, I found the problem. I had an indentation problem.
can you please point me to the code where you set the dimensions and column number for the sidebar bottom buttons?