Need help resizing in vertical orientation

[sdetweil]

@matthewlawson3 to find them, understand what is where.

and y can copy main.css to custom css and give every region a different background color

[BKeyport]

If you wanna use the entire screen - in custom.css add:

/* Use the entire screen */

body {
	margin: 0px;
	height: 100vh;
	width: 100vw;
 }

Don’t copy main.css into custom and start there - it’s a bad idea - just fiddle with the tags you wanna adjust. The mirror loads main.css, then every module’s CSS file, then custom.css and css will add your rules to the tag.

[sdetweil]

@bkeyport make sure if u change body like that, to fix the fullscreen definition which does a negative value to reverse the margin value coded in body.

also, copying main was because we recommend NOT changing values there

[Matthewlawson3]

@sdetweil okay. I’ve never modified anything CSS. Sounds like I am modifying code like that that is used for a webpage. A few questions…

Where is the main.css and custom.css located?

You are saying make a copy of the original main.css and I then modify the original main.css? I assume if something goes wrong that I can then copy back in place the copy of the original main.css to get everything back to normal.

What do I use custom.css for?

Thanks and forgive my ignorance on this!

[sdetweil]

@matthewlawson3 the css files are in the MagicMirror/css folder

MagicMirror is indeed a webpage, called a Single Page Application

because CSS supports overriding (replacing) styles previously defined
the order of processsing is

main.css
any module provided classes/styles, thru the getStyles() method
custom.css

this way custom.css can change anything defined before

[sdetweil]

@matthewlawson3 I was suggesting NEVER to modify main.css

so, if u follow that rule, you need custom.css to contain what is in main.css for testing

[sdetweil]

@matthewlawson3 see this topic
https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works?_=1616334901530

[Matthewlawson3]

@sdetweil so I just copy the contents of main.css into a new file called custom.css? Then I modify custom.css and that should show when I run the MM? Or does that custom.css have to be renamed to main.css and the original main.css renamed to something else while testing?

[sdetweil]

@matthewlawson3 do this

cd ~/MagicMirror/css
cp main.css custom.css

edit custom.css and change

body {
  margin: 60px;
  position: absolute;
  height: calc(100% - 120px);
  width: calc(100% - 120px);
  background: green;                                     <- this line 
  color: #aaa;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
}

start mm

and u should see this

now you can see the border around the main area, where all the modules are placed

[sdetweil]

@Matthewlawson3

and if u set the background-color for date, time, and calendar

.calendar {
	background-color: blue;
}
.date {
	background-color: red;
}
.time {
	background-color: pink;
}

you’ll see this