• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

What's the correct way to remove any margins from a module?

Scheduled Pinned Locked Moved Solved Troubleshooting
3 Posts 2 Posters 149 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.
  • R Offline
    redink
    last edited by Nov 9, 2024, 3:12 PM

    I am using MMM-CalendarExt3 with some fairly limited width. I’d like to remove any margins from it and have it go from edge to edge. In the past, I did this using custom.css, but it seemed hacky. I just tried setting the position to “fullscreen_below” and it removed the margins, but it’s sitting at the very top of the screen. How do I make it appear at the bottom of my screen with no margins or padding?

    S 1 Reply Last reply Nov 9, 2024, 5:16 PM Reply Quote 0
    • R Offline
      redink @sdetweil
      last edited by Nov 10, 2024, 11:05 AM

      Thanks, I ended up doing this in my custom.css

      #module_4_MMM-CalendarExt3
      {
          margin-left: -40px;
          margin-right: -40px;
      }
      

      It doesn’t seem like the best approach, but it works.

      1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @redink
        last edited by sdetweil Nov 9, 2024, 5:17 PM Nov 9, 2024, 5:16 PM

        @redink in main.css the module wrapper is defined like this

        .module {
          margin-bottom: var(--gap-modules);
        }
        

        so you could override that

        .module_name(or class)  {
           margin-bottom: '0px';
        }
        

        see the second link in my signature below on how to use the developers window elements tab to discover and test changes before copy/pasting them into custom.css

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        R 1 Reply Last reply Nov 10, 2024, 11:05 AM Reply Quote 0
        • R Offline
          redink @sdetweil
          last edited by Nov 10, 2024, 11:05 AM

          Thanks, I ended up doing this in my custom.css

          #module_4_MMM-CalendarExt3
          {
              margin-left: -40px;
              margin-right: -40px;
          }
          

          It doesn’t seem like the best approach, but it works.

          1 Reply Last reply Reply Quote 0
          • S sdetweil has marked this topic as solved on Nov 12, 2024, 11:55 PM
          • 1 / 1
          1 / 1
          • First post
            3/3
            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