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.

    Should be an easy one: module_center stretches the entire width of the screen. How do I resize this?

    Scheduled Pinned Locked Moved Development
    4 Posts 3 Posters 2.9k Views 3 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
      beeficecream
      last edited by

      I have my MM setup using the Carousel module so I can cycle through multiple slides of data. I have a page per personal stuff (calendars, email, weather) and another page for news (for now). Everything is working perfectly though I really hate how my news feeds are stretching the width of the entire screen since I keep them in the middle.

      What I’m hoping to be able to do is limit just my newsfeeds to a smaller subsection of the screen so I can still use my left/right columns for additional data. How would I go about doing this? Would I include a new css file in the newsfeed directory? Does it consume these automagically or do I need additional JS to make the module consume them? Is it possible to do this via the custom.css file in the css directory?

      N 1 Reply Last reply Reply Quote 0
      • N Offline
        ninjabreadman @beeficecream
        last edited by

        @beeficecream Add this in your custom.css in MagicMirror/css:

        .module.newsfeed {
        max-width: 500px; // adjust px to taste, or use %, em, etc
        }
        

        You can learn more about CSS units here. I think that’s the right selector for newsfeed, but may be mistaken.

        Problem with config or JavaScript? Copy/paste it into JSHint.
        Check out the detailed walkthroughs on install, config, modules, etc.

        B 1 Reply Last reply Reply Quote 2
        • B Offline
          beeficecream @ninjabreadman
          last edited by

          @ninjabreadman Thanks again for the assistance, one day I will return the favor (just give me some time to learn JS and CSS)!

          This bit of CSS did in fact reduce the size of my news feeds to a more reasonable size, though it introduced a new problem - it moved the entire module to the left hand side of the screen. I don’t know if this is due to alignment or what, but my fix for THAT was to include the following bit of CSS into my custom.css as well:

          .region.middle.center {
            left: 30%;
          }
          
          1 Reply Last reply Reply Quote 1
          • M Offline
            mlcampbe
            last edited by

            Does this still work? I tried it just now and when I set the max-width value the module did shift to the left side. Even when adding the .region.middle.center code that did not help me.

            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