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 184 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

      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 Reply Quote 0
      • R Offline
        redink @sdetweil
        last edited by

        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

          @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 Reply Quote 0
          • R Offline
            redink @sdetweil
            last edited by

            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
            • 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