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

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.8k 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 Feb 24, 2018, 7:39 PM

    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 Feb 24, 2018, 10:03 PM Reply Quote 0
    • N Offline
      ninjabreadman @beeficecream
      last edited by Feb 24, 2018, 10:03 PM

      @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 Feb 25, 2018, 8:01 PM Reply Quote 2
      • B Offline
        beeficecream @ninjabreadman
        last edited by Feb 25, 2018, 8:01 PM

        @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 Mar 4, 2019, 3:06 PM

          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