Weather tile icon got dinky the other day?

SharpTools.io (web)
1

The weather icon on my weather tiles shrunk about 50% a few days back. I can’t figure out how I managed to do this. So I thought I would use this as an opportunity to get much better at css work as I still feel like I am shooting in the dark.

I believe the line that impacts the icon in this tile is:

.tile.–theme-style-weather .temperature-and-icon svg { width: 40%; position: absolute; top: 45%; left: 35%; transform: translate(-50%, -50%); }

I am not sure how I ended up at these set of parameters but it was mostly copying and pasting from other examples on the board. But currently the line is doing anything so I am thinking I am missing the target?

This is what I am seeing in the inspect for this element:

<path data-v-79d2c590=“” fill=“currentColor” d=blah blah" class=“”>

Here is everything I have in the css:

> /* Weather Tile */
> .tile.--theme-style-weather .title { top:5%; font-size: 4em; }
> .tile.--theme-style-weather .tile-footer { text-align: center; bottom: unset; top:95%; font-size: 3.0em !important; }
> .tile.--theme-style-weather .icon svg {width: 50%; height: 50%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); }
> .tile.--theme-style-weather .icon svg {width: 50%; height: 50%; }
> .tile.--theme-style-weather .content-holder {width: 100%; }
> .tile.--theme-style-weather .temperature-and-icon svg { width: 40%; position: absolute; top: 45%; left: 35%; transform: translate(-50%, -50%); }
> .tile.--theme-style-weather .temperature-holder {position: relative; left:30%; font-size: 1.60em; }

image

Thanks for any pointers.

2

As usual, I’ll preface this that any supplied Custom CSS snippets are not officially supported and you may have to tweak things with future app updates.

I think it’s because you’re only targeting the width with the temperature-and-icon line.

Whereas with the line 2-3 with targeting .icon (which won’t actually apply to a weather tile icon) you’re applying both the height and the width.

So instead of

.tile.--theme-style-weather .temperature-and-icon svg { width: 40%; position: absolute; top: 45%; left: 35%; transform: translate(-50%, -50%); }

Add in the height too:

.tile.--theme-style-weather .temperature-and-icon svg { height: 40%; width: 40%; position: absolute; top: 45%; left: 35%; transform: translate(-50%, -50%); }

And if it’s still too small or too big, you could try adjusting those values up or down together.

Alternatively, you might find just adjusting the font-size of the icon easier:

.tile.--theme-style-weather .temperature-and-icon svg { font-size: 5em; }
3

Thanks. None of the height/width commands seemed to work. And they were working up until a few weeks ago - no doubt something else changed. But the font-size of the icon was an instant winner and frankly much easier.

1 Like