Issue with bottom bar, newsfeed module and top margin.

Brandenborg

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

sdetweil

@Brandenborg while I don’t have the solution, you can see the calculated css by opening the developers window, ctrl-shift-i on the keyboard, select the tab labeled ‘elements’ and navigate thru the web page content.

as u select each element, on the right is a window with the css selectors used (top most parent at the bottom)

Brandenborg

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