3. Full Screen CSS
MagicMirror² v2.4.1 is available! For more information about this release, check out this topic.
Please read the release notes carefully since this update requires adjustments to your Raspberry Pi configuration!

Full Screen CSS

  • A

    Curious, and I might be in the wrong section…

    I’m wanting to try using several modules but using this as a full screen digital signage option. How can I get the most use of the whole screen?

    Thank you,

    Bryan

    0
    J
     1 Reply
  • J
    Module Developer

    @allebone Are you referring to adjusting or eliminating the margin around the outside edges of the layout? If so, you need to add some rules in your custom.css file, like this:

    body {
  margin: 10px; /* Adjust this to taste */

  /* Also adjust these to subtract 2 x the value above */
  width: calc(100% - 20px);
  height: calc(100% - 20px);

}

    If you want to eliminate the margin altogether, then the CSS looks like this:

    body {
  margin: 0;
  width: 100%;
  height: 100%;
}
    1
  • A

    I was using terrible words to describe, how I would actually like to use MagicMirror as more of an interactive Digital Signage platform. So leaving the Middle part open for Mirror is a waste of usable to space to me. Is that possible via CSS?

    Bryan

    0 1 Reply
  • Module Developer

    @allebone
    Of course.
    You can set the width of left, center, right for fitting full screen. By example, your left region could have 240px for narrow small information, center could have 1200px for displaying your main job, 520px for right region to show additional information modules. Anything possible. Most of the modules will be resized to the width of regions. (But I think you need to configure and adjust details for best looks)

    0