Need help resizing in vertical orientation

[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.

[sdetweil]

@matthewlawson3 u need to use the vertical page , sun over the mountains to upload a picture (third from right on desktop browser)

[Matthewlawson3]

@sdetweil Sorry. I have the green background and can see the border btw. Pictures are below of what it looks like normally. The MMM Tools is module is set for top left position and the calendar is too. The Bible module is set for bottom right position.

[sdetweil]

@matthewlawson3 would be better if u backed up a little got the whole screen as one image… we can zoom in on the pic…

what is that stomping all over the date?

[Matthewlawson3]

@sdetweil ahh that is MMM Tools. Since MMM Tools and the calendar are in the top left position this is how they end up. I like the calendar where it is. But the MMM Tools is pushed over to the right in this set up. Without the calendar, MMM Tools moves back to the left and out of the way.

[sdetweil]

@matthewlawson3
yeh, MMM-Tools looks like it has some css problems…

[Matthewlawson3]

@sdetweil Anything you can recommend for me to get it to behave? Something I could do in the custom.css?

[sdetweil]

@matthewlawson3 i don’t know… haven’t look at it before…

[Matthewlawson3]

@sdetweil Oh okay.

[Matthewlawson3]

@sdetweil I tried the full screen recommendation that @BKeyport recommended, but of course it didn’t fix the issue with MMM-Tools.

Do I have to go into the CSS of the actual module folder?

[sdetweil]

@matthewlawson3 u should be able to fix in custom.css once we figure out what the problem is

[sdetweil]

I don’t see the top left problem

[sdetweil]

and here is upper right , you can reduce the margin value…

its content will push things around… the regions are flexible, so they stretch to accomodate the content

[Matthewlawson3]

@sdetweil ok. Interesting you don’t have the same issue with top left. Could it be because I have MMM Tools above the calendar? Whereas yours seems to have the calendar above MMM TOOLS . Also, the clock module on mine is top center.

[sdetweil]

@matthewlawson3 yes, I can try flopping them around in the morning

[sdetweil]

@matthewlawson3 said in Need help resizing in vertical orientation:

Do I need to use the developer window in any way to help fix this?

probably