Trying to modify dimensions of module MMM-RAIN-RADAR

maddmurph

@broberg said in Trying to modify dimensions of module MMM-RAIN-RADAR:

.MMM-RAIN-RADAR .iframe {width: 300px; height: 300px}

How do you add that to the custom css?

BD0G

There is a subdirectory named css below the main MagicMirror directory. Within that subdirectory one should find a file named custom.css. Open this file with the built in text editor by right clicking upon the file and choosing Text Editor.

Then copy the code above by highlighting it and then right clicking and choosing copy or highlighting it and pressing CTRL-C .
Then create a line within the custom.css by clicking below the body statements and then Right Click and Choose Paste or press CTRL-V

Make sure that this code is NOT within the brackets that specify body, but instead below those entries.

maddmurph

@BD0G ahhhh I put it in the body brackets. I’ll try outside of them. Thanks!

mcneilp

I am having the same trouble. This line of code seems to set the iframe height to 50vh. I have no idea what “vh” is.

iframe.style = “border:0;height:50vh”;

In my custom CSS i had to use:

.MMM-RAIN-RADAR .iframe {
width: 300px;
height: 300px !important
}

I added the !important to get it to override this other inline style which seems to be ill formed.

sdetweil

@mcneilp vh is a percentage of view height, vw is view width…

you would use these instead of hard coded number of pixels (99px),
caus eon big screens the number of pixles change the percentage of vh would keep the look the same

mcneilp

@sdetweil
interesting. I have never used “vh” as a unit before. Haven’t done much CSS in a while though.

sdetweil

@mcneilp 50vh is 1/2 the screen height, 100vh is full height