Need help resizing in vertical orientation

[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

[Matthewlawson3]

@sdetweil Thank you. So when I can see the borders, I would assume I have to adjust the border size and make it smaller?

Below are some pictures of the MMM Tools issue and the BibleGateway issue where they are invading the space of the other modules. I need MMM Tools to fill that gap on the left and the BibleGateway module to get back to the right side.