Remove space between two modules. Custom CSS code and pictures.

BKeyport

Try messing with this:

.module {
        padding: 10px;
 }

In main.css there’s also a “margin-bottom: 30px” in that css piece.

Look through main.css for other settings you can monkey to get it to go. It may be that you can adjust it for that region only with the right css pieces.

jamaces

@bkeyport

I did change the padding of the module and it didn’t change the distance.

I have since tried doing .region and again it was a no go. Just moved both modules all around without changing the distance between the two.

I don’t understand how the weather module worked no concern.

Maybe I will try changing the location of the mlb module to the top where weather is and see if it’s location based or module based.

BKeyport

@jamaces One other thing you can try - you can see if it’s dead space or something the module is hiding by adding a background shade to all modules.

.module {
          background: rgba(0, 0, 0, 0.5);
}

jamaces

@bkeyport I flipped the weather to bottom_right and MMM-MLB to top_right

MMM-MLB is now perfect.

Weather is now showing a gap between bottom_right. So it must be within magicmirror and not module based.

As an “easy” fix I tried bottom_left and its the same thing there is a gap between the two modules.

I don’t really know what i’m going to poke around at but I will give it a go. See what I can find.

jamaces

@jamaces

For future knowledge

within the Main.css there is

.region.bottom .module {
     margin-top: 30px;
     margin-bottom: 0px;
}

adding to custom.css

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

Will fix the issue.

However if you have a bottom_bar module it removes the gap between bottom_bar and anything in bottom_left/center/right