Changing physical sizes of different modules. Everything's too big!



  • Hello all, my name is Mike. I have been lurking on this forum for a while trying to decide if I wanted to try to build myself a Magic Mirror.

    I have never done any programming. I have never done anything with a Raspberry Pi. I am computer literate though which is how I managed to get MagicMirror up and running on my Pi.

    I don’t know how to solve my problem. First off, the only modules that are showing is the time, calendar, compliments and news feed. I didn’t want the compliments so I just deleted that line in the modules config file. I think the weather and forecast modules arent loading because they don’t know what city to show. Second thing which is my main concern is that the modules are too big. Meaning they take up all the space on the screen. I have read just about everything I can find and have attempted to implement what I find to no avail. There has got to be an easy way to do this. I have tried modifying the custom css to make the font sizes smaller but the only thing I have been able to do is make the “am/pm” on the clock part change size which leads me to believe I’m on the right track. I have been at this for about a week and It’s driving me nuts. Like I said, I have absolutely no programming experience whatsoever. I wish they made a WYSIWYG programmer thingy for this css/java stuff.

    So am I right to be trying to modify a css script to do what I want or should I be trying to mess with the Java code?

    And should I try to change the size using “small” or percent or px or whatever else acronym they use for font size. I used small and was able to make the pm on the clock smaller but I thought since Its the only thing in the script, it would apply that to everything.

    I am going crazy guys because I know its super easy and I just can’t seem to get it. This is my first attempt at anything like this, but I have been reading and reading and felt fairly confident I could do this. I just need a little guidance. Thanks for any help.



  • First off, you are probably right about the weather not showing if you haven’t inputted your own info. Don’t worry, its all not that big of a learning curve! You have some info showing so that is good!!

    Recently I just learned about playing with zoom in your custom.css

    Try adding
    body {
    zoom: 70%;
    }

    to your custom.css file and see if that makes things a little more manageable in size for ya



  • That pretty much did what I wanted, now I need to play with the actual text boldness a little. It’s kinda scrunched together.

    See? I knew it was a super simple line of text. I was going freakin crazy man. I wanted to try to figure it out myself instead of asking because I learn better by trial and error but i was stuck. OK now I can work on figuring out how to input my location. The learning curve for a non programming type like me is pretty steep. I’m just a dumb mechanic. I’m used to physical hard labor! lol! I’m not used to actually having to using my brain heh heh. But hey, I’m an old dog learning new tricks so bring it on!

    Thanks alot for that tip. I’m glad there is a support system in place like this. Actually I’ve found that all different type of hobbies have this type of support. It comes down to regular people who enjoy doing whatever it is they do, and want to help and encourage new guys. Thanks again brother. If you have any more tips, I’m all ears!



  • @Diareactic no problem! play with the zoom til you get the right number you like. Been doing this for over a year and there are still things I bash my head in trying to figure out but sometimes you just know someone has a quick answer! LOL