MagicMirror² v2.14.0 is available! For more information about this release, check out this topic.

Move the bottom_bar a little higher

  • Hi all,
    My first frame is up on the wall! Very chuffed with it as a first prototype done very much on the cheap.

    One thing I could do with is moving the bottom bar up slightly as the way our frame is it covers up maybe 0.5cm of the bottom of the screen.

    Is it possible to configure the specific location of the regions any?

  • Project Sponsor


    You can adjust the bottom margin to go over the frame. (add this to the custom.css file)

    body {
      margin-bottom: 150px;
      height: calc(100% - 180px);

    This will squish everything tighter so nothing will be placed below the visible surface

  • That’s awesome thank you.

    On my second frame now but similar subject just getting config on my pi right First

    Can modules overlay others?

    Ie I have configured iframe to be in bottom left which I understand is above bottom Bar.

    Currently it overlays calendar which is in top left which blocks content from the calendar

    If I could amend it to overlay the bottom bar then that would be great.

    Picture attached to show what I mean…well they would be if I could figure how to add a picture from an iPhone sorry!

  • Project Sponsor


    in custom.css add
    z-index : 3;

    This will put the entire top left region above everything else

  • That’s awesome thank you.

    Last question and this possibly does need a. We post! Any idea how I’d hide the white border around iframe?

Log in to reply