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.

    Centering Photos on MMM-ImagesPhotos

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    11 Posts 3 Posters 3.2k 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.
    • S Offline
      sdetweil @plainbroke
      last edited by sdetweil

      @plainbroke weird. the code reads the screen height and width and adjusts the position and size to keep the same aspect ratio.

      also, the background is already black

      only on my version. the original does it differently

      Sam

      How to add modules

      learning how to use browser developers window for css changes

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

        @kit444 you could add a css z-index:-1

        but that is what background does.

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        K 1 Reply Last reply Reply Quote 0
        • K Offline
          kit444 @sdetweil
          last edited by

          @sdetweil I could use that code to position the middle_center region behind the other regions?

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

            @kit444 z-index:-?? just pushes it farther away, other modules would then be on top z-index:0;

            fullscreen-above is z-index:1;

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            K 1 Reply Last reply Reply Quote 0
            • K Offline
              kit444 @sdetweil
              last edited by

              @sdetweil I’m still not having any luck. I tried adding z-index: -1 to the region.middle_center in the custom css. It still placed the photos over some of the modules. I tried adding a z-index: 0 or 1 to another region to see if I could re-layer the regions. No difference. I added z-index: -1 to the middle_center region in the main. css. It centered the photos under all the other regions, but left a black bar in the middle of each. Lastly I tried to add an align-items and align-content to the main css under the fullscreen region. Neither worked.

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

                @kit444 rather than try and try and try

                see
                https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1644962684132

                one thing to do to learn the regions is to set each to a different background color.

                the regions overlap…

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • 1
                • 2
                • 1 / 2
                • 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