@Veldrovive
Thanks. And thank you for a really useful module!

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;
 }

@sdetweil thanks for the advice.

After some more trial and error it made me figure out I had to add these two to fix it.

 .region.bottom.bar .container {
	margin-top: 0;
 }
 .region.bottom.bar .module {
	 margin-top: 0;
 }

Guess it was the container one that I was missing and had to use together with the module definition to get it working.

I’m having some issues removing some distance between the region bottom.bar and bottom.left/right. Seems that the default news module has some kind of margin on the top creating a distance of about 20-30px.

I tried experimenting with margins and sizing for both the module and the region with no luck so far. Making the region smaller only moves the module down and out of sight… margin experiments seems to be doing nothing…

My current custom css is as follows:

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/

 body {
	position: absolute;
	margin: 2px;
	margin-right: 2px;
	height: 100%;
	width: 99%; 
 }
 .region.top.bar {
	height: 40px;
	text-align: left;
 }
 .region.bottom.bar {
	background-color: red;
 }
 .region.bottom.left {
	 margin-bottom: 0;
	 background-color: royalblue;
 }
 .region.bottom.right {
	 margin-bottom: 0;
 }
 .region.fullscreen {
	 position: absolute;
	 top: -2px;
	 left: -2px;
	 right: -2px;
	 bottom: -2px;
 }
.MMM-MyCalendar {
	max-width: none; /* this will allow the calendar to expand to the full width of the column */
}
.MMM-MyCalendar .calendar-event .title,
.MMM-MyCalendar .calendar-event .time,
.MMM-MyCalendar .calendar-event .location {
	padding-left: 0px; /* you may want to omit this if you get unexpected overlapping... */
	white-space: normal;
}
region.bottom.bar .newsfeed {
	margin-top: 0;
	margin-bottom: 40px;
}

@Veldrovive
Thanks. And thank you for a really useful module!

@Veldrovive thanks a lot. I should manage that.
I recon the 0 position is the first page I define the contents of?

I love this module especially in use together with the MMM-navbar.
Is there any config using existing code that will let me make it return me to “default” page after a given period of time after changing page?

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;
 }

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

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