Margin removal, background region and top bar.

[Brandenborg]

I’m running MagicMirror on the raspberry touch screen and the margins end up being to large.
As it’s a screen and not a mirror I additional use a module for background slideshow in the region full screen below.
For the margins to the edges I’ve tried using:

body {
margin: 0px;
height: 100%;
width: 100%;
}

in the custom css. And while works fairly well for the normal modules, the background module somehow gets offset to the left.

Additionally I’m using the top bar region for a navbar. I tried adjusting the size of this using “.region.top.bar” in custom css and setting height as 10 and 20px, however this doesn’t seem to change anything.

Thanks in advance for any advice

[broberg]

@Brandenborg First off,

What background module are you using? and in what region have you placed that module?

Restricting the top bars height doesn’t help much if the content inside it are larger.
(you can try visualising this by adding overflow: hidden; to the .region.top.bar and see what happens to the content of the top bar)

you could also add background-color: red; to the regions you are having problems with to see exactly where they start and end.

[Brandenborg]

Hi @broberg. Thanks for replying.
I’m using MMM-Flickr and have assigned that to the region fullscreen_below. Got this configured to fit perfectly prior to playing with css.
However I’ll probably look for a different one where I can download and select specific images instead.

I’ve put MMM-page-selector (no visible content) and MMM-navbar in the top bar region. The latter looks quite small but the distance between it and the clock in top left is quite big. I’ll try the overflow and coloring to see what I can find out from that

[Brandenborg]

So seem to have gotten a little further regards to the top bar.
Adding the position: absolute in body seems to have somewhat helped.
The overflow hidden actually made top.left and top.right disappear.

 body {
	position: absolute;
	margin: 2;
	height: 100%;
	width: 99%; 
 }
 .region.top.bar {
	 height: 40px;
	 float: left;
 }

My top.right module seems to be positioned a bit higher than my top.left module… But that might just be the look of the module itself.
Still need to figure out how to left align the navbar and what is happening with the background_below region…

Edit: Figured out the background as well after some research.
The fullscreen section is actually defined to be offset by -60px due to the body margins being defined as 60px. So had to simply add a similar section in my custom.css changing the offset to what I put in the body margin.

.region.fullscreen {
	 position: absolute;
	 top: -2px;
	 left: -2px;
	 right: -2px;
	 bottom: -2px;
 }