Changing Module Display Width

johnnyboy

Perfect thanks

cowboysdude

@johnnyboy said in Changing Module Display Width:

@cowboysdude

Perfect thanks

You’re welcome!

You can also do this:

 {
    module: 'MMM-History',
    position: 'top_right',
         config: {
	 maxWidth: "33%"
		}
          },

broberg

@johnnyboy It will change the height/width of the module “container”, it will not affect the size of objects, images or fonts. Normally the module “container” will adapt to the size of it’s content. but with the width/height specified you force it to be a set width/height.

johnnyboy

@broberg

Ahhhhhhhhh… Gotcha ;-)… reduce the % of the container also reduces it’s contents in relation. Thanks.

broberg

@johnnyboy well, not entirely, the content (text etc.) don’t change in size, all you do is changing the surface that the content can take up.

like moving from a big garage to a small, you still have the same amount of stuff but less area to put it in, so the stuff that doesn’t fit spills over and out on to the yard.

johnnyboy

@broberg
Oh, ok… Well I will play about with it anyway just to see what that does to it… just so I will know for experience as its another learning curve i’ve learned

broberg

@johnnyboy You can do a lot to the Magicmirror and it’s module just by editing the css,

Here is a good reference for CSS : https://www.w3schools.com/css/

And css for beginners : http://www.htmldog.com/guides/css/beginner/

johnnyboy

@cowboysdude said in Changing Module Display Width:

 {
    module: 'MMM-History',
    position: 'top_right',
         config: {
	 maxWidth: "33%"
		}
          },

Oooooo MM didn’t like that :-) So I musta entered something wrong or didn’t enter something I should have? Can you please guide me to what part I did wrong here?

 {
    module: 'MMM-WunderGround',
    position: 'top_left',
         config: {
	 maxWidth: "33%"
		}
          }, 
apikey: 'pws: mydetailshere',
hourly: '1',
fctext: '1'

broberg

@johnnyboy maxWidth isn’t specified for the WunderGround module. So you can’t use the same config option there as you could with MMM-History.

Confusing I know, but most modules don’t use size settings in the config since it’s better to set that with css code.

Custom css-code is put in the file custom.css that can be found in the css folder.

johnnyboy

@broberg

Ah, ok… I was jumping ahead of myself there… so I will try

.MMM-WunderGround {
    width : 200px;
}

200px; or whatever looks good.
Thanks again.