MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Issue with bottom bar, newsfeed module and top margin.

    Scheduled Pinned Locked Moved Custom CSS
    3 Posts 2 Posters 1.7k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • B Offline
      Brandenborg
      last edited by

      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;
      }
      
      S 1 Reply Last reply Reply Quote 0
      • S Away
        sdetweil @Brandenborg
        last edited by 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)

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        B 1 Reply Last reply Reply Quote 1
        • B Offline
          Brandenborg @sdetweil
          last edited by 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.

          1 Reply Last reply Reply Quote 0
          • 1 / 1
          • First post
            Last post
          Enjoying MagicMirror? Please consider a donation!
          MagicMirror created by Michael Teeuw.
          Forum managed by Sam, technical setup by Karsten.
          This forum is using NodeBB as its core | Contributors
          Contact | Privacy Policy