Need help resizing in vertical orientation

sdetweil

@matthewlawson3 see how to use developers window
https://forum.magicmirror.builders/topic/14782/make-a-remove-header-space-or-overlap-two-modules/2

Matthewlawson3

@sdetweil okay I’ve read through some of what you posted. So I’m trying to get to the developer window to remove or modify certain regions on screen?

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?