MagicMirror² v2.4.1 is available! For more information about this release, check out this topic.
Please read the release notes carefully since this update requires adjustments to your Raspberry Pi configuration!

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



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



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



  • @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%;
    }