Positions of modules

jakuk

Hi all, I’ve got my magic mirror all up and running, and decided I wanted it portrait, so I got that sorted, but now all my modules I.e time, weather, news feeds are all bunched up together. How do I change the position of each module is it in the main .css file? Or the css file in the specific module folder? Also can someone explain how I go about changing them to specific locations.

Thanks

ninjabreadman

@jakuk Start at this post. The CSS will change the style of each module (size, font, etc) but to have them appear in the appropriate regions, it’s best to use your module configurations in config.js.

jakuk

Thank you for your reply. Yes I already know that to change the position of modules is in the config file, my problem is when I set my screen to portrait mode everything is in the middle of the screen now, even tho the clock config says top left? Does this need to say top_bar?

Thank you again.

ninjabreadman

@jakuk It needs to say top_left, although I suspect that it does.

When you quit MM, how does the display appear – is the desktop small and in the middle, or fullscreen? It could also be an overscan issue but shouldn’t put everything “in the middle”.

You could also try to revert to the default config.js to determine if MM layout is working correctly.

jakuk

Thank you so much it was an overscan issue the resolution was set wrong for portrait mode.
I have my resolution set to width 1100 x height 1920
My overscan left and right set to -20 and i still have black border can’t make it fit the width size fully? Any ideas?

Thankyou again…

Mykle1

@jakuk

“I don’t know nothing 'bout birthin no babies!”

Nor do I know about overscan. However, you can try something like this in your custom.css file. This gives me a mere 5 pixel border. You can adjust accordingly for your purposes.

 body {
 	margin: 5px;
	height: calc(100% - 10px);
	width: calc(100% - 10px);
 }

barnosch

why set to 1100?
Guess it’s a FullHD screen and should set to 1280. Otherwise it’s for sure not sharp or blurry because the aspect ratio is not correct.
I would give it a try and then set the overscan, if needed, correctly.

jakuk

@barnosch I was trying to stretch the screen but relised that wasn’t right way to do it… my resolution size is now set to width 1280 x height 1920… the bottom and top are perfect with no black bars but left and right Just won’t seem to change no matter what I change my overscan to? It says negative numbers if there is too much border but doesn’t seem to work…

Thanks

bhepler

@jakuk Just to be sure, what’s the resolution of your monitor? Some monitors are 16:9 and some are 16:10. Be sure to set your Pi’s resolution to the native resolution of your monitor. My recommendation is to let the Raspbian OS take care of the overall resolution and use the mirror configuration to handle borders.

jakuk

@bhepler hi yes my monitor is 1920 x 1080 but other way around to let it be portrait, it’s also 16:9 aspect radio. It’s just strange as the top and bottom are fine, it’s just left and right I’ve about about an inch black border on each side.

SOLVED Positions of modules