Hello, as you see from the pictures the degrees are overlapping with the city in my weather dashboard when the side panel in not pinned, if i pinned it everything is fine. What can cause this issue ?
Are you using a default theme?
Post a code for your weather card, I do not observe same with my card.
Also, do you use layout-card? Card-mod for this weather card?
Hello, i am usugn custome weather card. this is the code
entity: weather.home
forecast: true
hourly_forecast: false
details: true
current: true
name: Sofia
number_of_forecasts: '5'
Really dumb question here. What do you mean “pinned”?
Probably
vs
if the sidebar toggle is shown with the names of the tabs
and what about theme etc? asked some questions above
Also, this line is missing in your snippet - “type: custom:weather-card” (which you obviously have but forgot to show).
Cannot reproduce with a default theme:
yes, i forget to copy it. It is showing only if the temp is with 2 numbers and have numbers after the dot symbol. Now it is 7.2 and there is no problem with the visualization, but if it was 10.5 degree it will be overlapping the Sofia name.
type: custom:weather-card
entity: weather.home
forecast: true
hourly_forecast: false
details: true
current: true
name: Sofia
number_of_forecasts: '5'
Change a font-size with card-mod.
You can also edit the card itself (.js file) and put the city name a line lower:
This is what I have in the .js file:
.title {
position: absolute;
left: 0.5em;
font-weight: 300;
font-size: 3em;
color: var(--primary-text-color);
}
Could be this is achievable with card_mod though. I have this for a long time, when another user gave this solution.
Seeing as how this card hasn’t had an update in 2,5 years, perhaps best thing to do is to use a different card entirely though.
Can i change the font size only for the Sofia name and for the degrees ? I found this one but it is for the whole font
style: |
ha-card {
color: red;
font-size: 100px;
}```