ildar170975
commented
7 months ago You are using a conventional picture-elements card with its own "style" option. Setting any of CSS properties inside this "option" is not related to card-mod. It is not supposed to be asked here.
Surely, you may define some card-wide (or some element-wide) CSS variable like --my-custom-scale by card-mod (for instance, dynamically dependently on "mediaquery"; also for that interesting ":hover" feature) and then use it inside native "style" option.
But this is not about card-mod - it is mainly about how to scale elements dependently on a viewport.
Check the thread in Community where you already asked your floorplan-related question - there are proposals how to adapt elements' scales to a viewport.
Here is what I'd like to do - I have
picture-elementscard with a floor plan that looks great at it's design width(1300 px). On smaller screen it looks like crap because the image scales but the elements within it don't.Full res:
Small screen:
What I'd like to do is have a
transform: scale()on the picture element card to cause it and everything inside it to shrink with the screen. This would keep the layout but make most of the element unreadable. I'd then like to add a:hoverscale with the inverse of the top level scale to each child to use it to be full size when hovered.Sort of like this (hacked example by adding CSS in chrome dev tools) to show the hot tub temperature scaled on hover
I was looking for way of doing this in plain CSS but I can't
scale(calc(<some value in px eg vw>))becasue the result is in px and scale wants a float. I could do it with custom JS and may resort to that but I though I'd ask here if there was a way of doing it that I was missing.