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

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

  • B

    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?

    0
    N
     1 Reply
  • N

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

    1
    B
     1 Reply
  • B

    @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