Can't seem to move the position of a variable on a tile

[simon]

I am using a variable to display the number of people home coming from Hubitat.

I can’t seem to get the value on the far right tile to move up. I can get it to change size. I do have a bunch of things in the setup that are no longer used and may be causing issues. I am using the style Hide Footer Active and Inactive style. I have tried top with a percentage, and used absolute, important, etc.

But if anyone can help me figure out what is blocking the movement, thanks in advance!

/* Stop scrolling of windows /
::-webkit-scrollbar {
display: none; }
/ Stop pop-up commands on command received */
.toast.green { display: none }

/* Set default for all tiles */
.tile .title { top:70%; font-size: 1em }
.tile .icon svg {width: 45%; height: 45%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);}
.tile .tile-footer { text-align: center; bottom: unset; top:85%; ; font-size: 2vh }
.tile .tile-footer .status span.right { float: inherit!important; }

.tile.news-feed .title { top:0%; font-size: 4em !important; }
.tile.news-feed .main-content { font-size: 3em; }

.tile.calendar.agenda .main-content { font-size: 3em; }

.tile.clock .tile-footer { text-align: center; bottom: unset; top:80%; font-size: 2vh; !important; }
.tile.clock .time { font-size: 3em !important; }

.tile.thermostat .temperature { font-size: 7em; }
/* .tile.thermostat .current-temperature { font-size: 1em; text-align: left; top: 50%; !important; } */
.tile.thermostat .actions { font-size: 3em; position: absolute; left: 10%; top: 5%; !important; }
.tile.thermostat .status { font-size: 2em; position: absolute; right: 5%; top: 70%; }
.tile.thermostat .temperature svg { width: 25%; height: 25%; }
.tile.thermostat .tile-footer { font-size: 0.75em; top: 60%; }
.tile.thermostat .title { font-size: 2em; }

.tile.–theme-style-weather .title { text-align: left; top:5%; font-size: 3em; }
.tile.–theme-style-weather .icon svg {width: 50%; height: 50%; margin: 0; position: absolute; top: 50%; left: 10%; transform: translate(-50%, -50%);}
.tile.–theme-style-weather .tile-footer { text-align: center; bottom: unset; top:100%; font-size: 2em !important; }
.tile.–theme-style-weather .content-holder {width: 100%;}
/* .tile.–theme-style-weather .temperature-and-icon svg {width: 35%; position: absolute; top: 45%; left: 40%; transform: translate(-50%, -50%);} */
.tile.–theme-style-weather .temperature-and-icon svg { font-size: 6em; }
.tile.–theme-style-weather .temperature-holder {position: absolute; top:0%; left:70%; font-size: 1em; }

/* Hide Footer Active and Inactive */
.tile.–theme-style-hide-footer-active .title { top:80%; font-size: 1.25em }
.tile.–theme-style-hide-footer-active .icon svg {width: 50%; height: 50%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); }
.tile.–theme-style-hide-footer-active .value { }

.tile.–theme-style-hide-footer-inactive .title { top:80%; font-size: 1.25em }
.tile.–theme-style-hide-footer-inactive .icon svg {width: 50%; height: 50%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); }
.tile.–theme-style-hide-footer-inactive .value { }

[josh]

@simon

I can’t seem to get the value on the far right tile to move up.

What type of tile is this? I’m trying to make sense of why the value is pushed down so far in the first place.

I know I mentioned this in another thread, but this is really one of those cases where getting to understand the browser’s Dev Tools and what the CSS is doing are really important. Its way easier to look at the browser’s Dev Tools and be able to actually trace down what is causing the sizing / positioning changes than it is to try to parse through limited snippets and screenshots posted on a forum when it gets to this level of complexity.

Based on the CSS snippet provided, I don’t see what’s causing the size change (assuming it’s a regular variable tile) nor what’s causing the positioning of the main content to be off.

Is that the full and exact CSS that was applied at the time of your screenshot?

Even with your Custom CSS applied, I can’t reproduce the issue and the number looks properly centered to me whereas on yours it looks pushed down (and doesn’t appear to just be a visual illusion from the header being moved).

[simon]

Thanks

That is the extent of the css applied - unless there is anywhere else I could be applying css? It is a Kindle Fire HD 8. When I set Chrome dev tools to resolution 962 x 601 I am able to emulate what I see on the panel - the screenshot above. It is a variable tile:

and style selected is hide-footer-inactive and active:

I do look at the dev view in Chrome but don’t understand everything in there - what should I be looking at in order to diagnose this?