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.

    Question about layout position

    Scheduled Pinned Locked Moved Custom CSS
    6 Posts 3 Posters 1.5k Views 3 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.
    • lavolp3L Offline
      lavolp3 Module Developer @matelot20
      last edited by lavolp3

      @matelot20
      The fullscreen-below section has a margin of -60px, so is extended 60px beyond the visible display. However a padding of 100px should show your picture 40px below the upper border of the screen.
      I would consider trying the following:

      .fullscreen_below {
        margin-top: 100px
      }
      

      or check your padding-top entry for errors. Do you know how to work with the browser dev tools (F12 on your computer)?
      There in the elements tab you can check the css coder for every element. Very handy!

      How to troubleshoot modules
      MMM-soccer v2, MMM-AVStock

      1 Reply Last reply Reply Quote 0
      • lavolp3L Offline
        lavolp3 Module Developer @matelot20
        last edited by lavolp3

        @matelot20 said in Question about layout position:

        Also, my US holiday calendar is showing with 2 lines (the date and United States). I see others didn’t have the word United States on their screen. How can I fix so that United States doesn’t show up.

        this seems to be MMM-MyCalendar and not the calendar default module.
        MMM-MyCalendar has a showLocationoption. Try setting this to false
        https://github.com/jclarke0000/MMM-MyCalendar#configuration-options

        How to troubleshoot modules
        MMM-soccer v2, MMM-AVStock

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

          @lavolp3 Thank you so much for the pointer. I wouldn’t even know that the fullscreen margin is -60px. I used the margin-top to 180px as suggested and it works. The result is exactly what I want. I include the picture to see the update. Notice how my 7 day forecast is at bottom right. How do I move to be below the picture area? I try with middle_center but it shows over the picture.
          picture screen.jpg

          Thanks again.

          lavolp3L 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil
            last edited by

            you have to understand the design here.

            this is a stack, on the bottom (furthest away) is fullscreen-below (below all others)
            then there is the positions
            and then there is fullscreen-above (above all others)…

            fullscreen-below is for the background.
            content goes here, sits on top of background
            fullscreen-above is for a cover/screen-saver (hides all content and background)

            see the ~/MagicMirror/index.html for the layout of these areas…
            and then css/main.css for the classes that give it a 3 dimensional layout (zorder - is down, zorder + is above, normal i 0)

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • lavolp3L Offline
              lavolp3 Module Developer @matelot20
              last edited by

              @matelot20 Try putting it into fullscreen_below but in the config below the picture module.
              Or you could put it into bottom_bar and adjust the margin_bottom accordingly

              How to troubleshoot modules
              MMM-soccer v2, MMM-AVStock

              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