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

[beeficecream]

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?

[ninjabreadman]

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

[beeficecream]

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

[mlcampbe]

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.