Hi @gmobilize
the tile size is default 90px and the amount of tiles on a row for mobile is set to 3.
If it looks different on other screens than the screen is just smaller so it looks to be a better fit.
What you can do is edit the --tile-width-mobile and --tile-height-mobile in the css to a bigger value than 90 so it fits better on your screen.
Thanks for quick reply, at least it explains the perfect fit on other screens I guess.
About what you suggested: I actually tried doing so, and increased the tile size by 1px both ways and it immediately went to the next row, so cant manipulate the sizes much.
Are there any other options except dealing with it? 
As probably there is no invisible padding on the sides by default? Or if there is maybe that can be pushed to the maximum.
EDIT:
Tested on my gfs iPhone 11 Pro and there it looks much better at 90px
The tiles are wrapped in a div that has a fixed width 
mistake by me but for now you can fix it.
Add this to the style part:
@media (max-width: 768px) {
.homekit-card {
width:358px!important;
}
}
the 358px is the default width it already has so if you increase the mobile tile width with 10px you need to add 3 * 10px to the 358 so it will be 388px. if you increase it with 1 px it needs to be 361px
Sure
Here it is
Thanks for the heads up, I am still experimenting with visual appearance, that is why I dont have a dedicated CSS yet, but how do I implement this in my existing code without breaking anything?
type: custom:homekit-card
panel: true
style: |
:host {
--tile-background: rgba(10, 10, 10, 0.22);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: var(--card-background-color);
--tile-name-text-color: var(--disabled-text-color);
--tile-on-name-text-color: var(--primary-text-color);
--tile-state-text-color: var(--disabled-text-color);
--tile-on-state-text-color: var(--paper-item-icon-active-color);
--tile-state-changed-text-color: var(--primary-text-color);
--tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
--tile-value-text-color: var(--primary-text-color);
--tile-icon-color: var(--disabled-text-color);
--tile-on-icon-color: var(--paper-item-icon-active-color);
--tile-width-mobile: 100px;
--tile-height-mobile: 100px;
--tile-icon-size: 30px;
--tile-padding-top: 0
--tile-image-radius: 0;
}
.icon.image {
position: absolut
entities:
- title: Living Room
entities:
- entity: light.midesklamppro
name: Desk Lamp
icon: mdi:desk-lamp
slider: true
- entity: light.yeelight_ceiling_native
name: Ceiling Light
icon: mdi:ceiling-light
slider: true
- entity: light.yeelight_color_native
name: Stand Lamp
icon: mdi:floor-lamp
slider: true
- entity: scene.cdd0xeacoprbuxko
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.cdd0xeacoprbuxko
name: Feed Cat
icon: mdi:paw
- entity: light.window_led_strip
name: Window LED
icon: mdi:window-closed-variant
slider: true
- entity: light.yeelight_stripe_native
name: Desk Strip
icon: mdi:led-strip-variant
slider: true
@DBuit Thank you for this awesome panel card! I’m not sure if you’ve seen the issue I’ve opened on Github but it seems that your card isn’t working on a Google Nest hub with Home Assistant Cast. I’ve looked around a bit and found this in the FAQ here :
If you’re a custom card developer: the most common mistake is that LitElement is extracted from an element that is not available on the page.
As I’m not familiar with JavaScript it’s difficult for me to find the real problem… Would you mind taking a look or give me some pointers?
Thank you in advance!
Okay, think I sort of understand what you mean, will experiment more with this.
Anyway are you planning to make the width automatic in future update?
Hi @belgianrubs
thanks for mentioning the litElement thing i had the same problem and got a fix so in next release it should work
Just add in the style part.
Thank you! If you want me to test out a beta version, let me know 
Hello Everyone,
Just pushed new release with some fixes: Release Version 0.6.2 · DBuit/Homekit-panel-card · GitHub
@belgianrubs this should fix the cast
@gmobilize this fixed the issue when changing the mobile tile size so no need to change the style anymore
@DBuit Hi m8. A wierd bugg i iOS Thats Alvesta been there when Ussing your code for getting a westher card is this
https://drive.google.com/file/d/1sGiFFBxgTa7h6qwyEgT4j1eMRAzNFB2I/view?usp=drivesdk
In this video it jumps from showing a week and look good and ok. But the. A sek after it jumps to showing inte 3 days. Is there a way to handel it to stay in the look it has when the page is just refreshed?
Hi @Jimmy_Berglund,
The weather card show 3 instead of 5 days when the width of the card is below 245px.
So i cant really do anything but the only way it to increase the --tile-width-mobile so there is atleast 245px.
I tested it and if you set mobile width to 98px it works.
Hi @DBuit , thanks for your hard work to provide and maintaining this card. Unfortunately version 0.62 breaks the defined following :
–tile-width: 100px
–tile-height: 100px
If you visit a tab and you leave that tab to another tab with different tile height and width then it will pick up the value from the previous tab.
Please how can i solve this problem .
Thanks for your help
Hi @naijaping
with tab you are talking about a different view in hass? or another tab in your browser?
Thx man. Yeh that keeps the days there. half the text still dissapers but it looks better. It does the same on the video i showed before so you get what i mean.
Is there anyway to keep it there? Played abitt witht he high and with but seems to not change anything.
In any case its better and if nothing can be done than im ok.
The popup card stopped working a while ago and i just cant get it to work again.
Been pulling my hair for a while now so writing here in hopes some of you can find my mistake.
Browser_mod is installed and set up in configuration.yaml with browser_mod: and nothing else.
I have all my resources for lovelace listed in configuration file also.
Homekit panel card, card mod and light popup card are installed through HACS and resources added.
Below is my config
- entity: switch.salon_switch
name: סלון
icon: mdi:sofa-outline
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px