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.cssinMagicMirror/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%; } -
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.
