MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    7″ touchscreen - module size and overlapping issues.

    Scheduled Pinned Locked Moved Custom CSS
    10 Posts 5 Posters 3.4k Views 5 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M Offline
      Marius
      last edited by

      Hello everyone,

      I an new to MM2, just got it up running with modules that I prefer…

      I using a 7 inch rp display (800x480), however, i got issues due to modules overlapping.

      I have tried to custom css file by my self but ending up with nothing or failure results.

      could someone help me?

      evroomE Mykle1M 2 Replies Last reply Reply Quote 0
      • evroomE Offline
        evroom @Marius
        last edited by

        @Marius

        Hi,

        Last week I setup a Pi with the Pi display and noticed this too.
        As I only was interested in testing 1 module, I did not bother too much.
        Most persons of course use HD, full HD or even higher pixel density.
        The modules do not care about your screen and have their own sizes, characters sizes, margins, etc.
        They do not auto-adjust, in general, perhaps there are exceptions.
        I do not known about generic settings that can be adjusted, so it seems you will need to adjust each module in the custom.css.
        Personally I think there is only space for max. 4 modules per screen/page.
        There are modules that can rotate pages or even rotate modules in 1 page, allowing you too run more modules.

        This will supply you with a bit more effective total space:

        body {
          margin: 1px;
          height: calc(100% - 1px);
          width: calc(100% - 1px);
        }
        

        For starters.

        MagicMirror version: 2.30.0
        Raspberry Pi 4 Model B Rev 1.5 (8 GB RAM)
        Raspbian GNU/Linux 12 (bookworm)

        Test environment:
        MagicMirror version: v2.30.0
        Raspberry Pi 3 Model B Plus Rev 1.3 (1 GB RAM)
        Raspbian GNU/Linux 12 (bookworm)

        1 Reply Last reply Reply Quote 0
        • Mykle1M Offline
          Mykle1 Project Sponsor Module Developer @Marius
          last edited by

          @Marius

          Try the commands from this tutorial to manage the size of the modules in real time

          https://forum.magicmirror.builders/topic/5619/how-to-find-and-use-key-commands-in-mm-for-absolute-beginners

          Create a working config
          How to add modules

          CyruS1337C 1 Reply Last reply Reply Quote 0
          • M Offline
            Marius
            last edited by

            @evroom
            Thank you!
            That really worked quit well for my setup.

            @Mykle1
            I tried that, however, it was not what i looked for.

            So, is there anyway that i can resize a module only ? My Netatmo module still looks a but too big. Another thing i notice that sonos module is overlapping when text get to long when playing a certain song…

            see below, please :)

            https://imgur.com/a/ZiulbqI

            brobergB 1 Reply Last reply Reply Quote 0
            • brobergB Offline
              broberg Project Sponsor @Marius
              last edited by

              @Marius

              You can either use the “zoom” function in css, like ..modulename { transform: scale(0.8) }

              Or you can set a specific width for the module so it forces the text to get a row break like .modulename { width: 200px; }

              1 Reply Last reply Reply Quote 0
              • M Offline
                Marius
                last edited by

                @broberg
                Thank you for the help. Now i got i all sorted out :)

                Btw, how can I delete/hide text “4 minutes ago” update text, please see picture in post above. I have been looked in netatmo.js and netatmo.css file without any luck.

                brobergB 1 Reply Last reply Reply Quote 0
                • brobergB Offline
                  broberg Project Sponsor @Marius
                  last edited by

                  @Marius

                  possibly the " hideLoadTimer: false," configuration option? (change to true if not already)

                  or maybe .MMM-Netatmo .updated {visibility: hidden;}

                  1 Reply Last reply Reply Quote 0
                  • CyruS1337C Offline
                    CyruS1337 Project Sponsor @Mykle1
                    last edited by

                    @Mykle1 said in 7″ touchscreen - module size and overlapping issues.:

                    @Marius

                    Try the commands from this tutorial to manage the size of the modules in real time

                    https://forum.magicmirror.builders/topic/5619/how-to-find-and-use-key-commands-in-mm-for-absolute-beginners

                    Is there also a tutorial about the custom.css. I have the following problem.
                    Before the hard reset, I changed the costum.css so that the modules were really in every corner of the monitors. Thus, the display on the monitor was optimally utilized before the module disappeared behind the edge of the monitor. Unfortunately I do not know the attitude anymore.

                    1 Reply Last reply Reply Quote 0
                    • Mykle1M Offline
                      Mykle1 Project Sponsor Module Developer
                      last edited by

                      @CyruS1337 said in 7″ touchscreen - module size and overlapping issues.:

                      Is there also a tutorial about the custom.css.

                      https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works

                      Also, there is a wealth of css info online. Google your css questions and see what you get.

                      Create a working config
                      How to add modules

                      CyruS1337C 1 Reply Last reply Reply Quote 0
                      • CyruS1337C Offline
                        CyruS1337 Project Sponsor @Mykle1
                        last edited by

                        @Mykle1 OK everything good. I have not asked Google, I will also google ask.

                        Many Thanks

                        1 Reply Last reply Reply Quote 0
                        • 1 / 1
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy