• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.1k 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 Feb 14, 2022, 11:39 PM Feb 14, 2022, 11:36 PM

    @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 Feb 14, 2022, 11:37 PM

      @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 Feb 15, 2022, 6:30 PM Reply Quote 0
      • K Offline
        kit444 @sdetweil
        last edited by Feb 15, 2022, 6:30 PM

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

        S 1 Reply Last reply Feb 15, 2022, 6:39 PM Reply Quote 0
        • S Offline
          sdetweil @kit444
          last edited by sdetweil Feb 15, 2022, 8:12 PM Feb 15, 2022, 6:39 PM

          @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 Feb 15, 2022, 10:45 PM Reply Quote 0
          • K Offline
            kit444 @sdetweil
            last edited by Feb 15, 2022, 10:45 PM

            @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 Feb 16, 2022, 1:33 AM Reply Quote 0
            • S Offline
              sdetweil @kit444
              last edited by sdetweil Feb 16, 2022, 4:36 AM Feb 16, 2022, 1:33 AM

              @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
              1 / 2
              • First post
                10/11
                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