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

[jamaces]

I was able to achieve this with the default weather module.
I duplicated the module so I could remove the space between current and forecast.

Using custom CSS I was able to do the following

.module.weather {
     background-color:rgba(0,0,0,0.1);
     border-radius:10px 10px 0px;
     padding:4px;
     margin-bottom:0px;
}
.module.weather2 {
     background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0));
     border-radius:0px 0px 10px;
     padding:4px;
}

I am trying to do the same for MMM-MLB.

I duplicated the module so I could have one with scores and the other with standings.

My custom css looks the exact same other than no gradient.

.module.MMM-MLB {
     background-color:rgba(0,0,0,0.3);
     border-radius:10px 10px 0px;
     padding:4px;
     margin-bottom:0px;
}
.module.MMM-MLB2 {
     background-colour:rgba(0,0,0,0.3));
     border-radius:0px 0px 10px;
     padding:4px;
}

I have tried margin-top, and margin-bottom on both with 0px, 0%, 0, I have tried -500px and nothing will change the distance.

If anyone has a suggestion its appreciated.

Thank you.

[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