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.

    Alignmend of modules

    Scheduled Pinned Locked Moved Troubleshooting
    11 Posts 5 Posters 3.6k 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
      MajorC Project Sponsor @codac
      last edited by

      @codac said in Alignmend of modules:

      .MMM-DWD-WarnWeather .warning {
      float: right;
      }

      Thanks, that is a good one!

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

        @majorc u could try the same float-right for the pollen module

        u may need to look in the developers window, elements tab to see the class used

        ctrl-shift-i, select the elements tab, expand the nav tree in the left column to locate the module (top, top-right…)

        set the module background to blue, to see the whole thing
        and then add styles to the content

        see how to use the elements tab info here
        https://forum.magicmirror.builders/topic/14782/make-a-remove-header-space-or-overlap-two-modules/5

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        C 1 Reply Last reply Reply Quote 0
        • C Offline
          CarstenD @sdetweil
          last edited by

          @sdetweil for MMM-DWD-Pollen you can change the following classes in CSS:

          tab-center
          pollen-low
          pollen-low-medium
          pollen-medium
          pollen-mediumhigh
          pollen-high
          pollen-nodata
          
          

          and just make

          text-align: right
          

          That should do the trick. Float will not work - it pushes everything to the right w/o spacing.

          I am still thinking how one can save the space on the right side but I am not an CSS / HTML expert.

          S M 2 Replies Last reply Reply Quote 0
          • S Offline
            sdetweil @CarstenD
            last edited by

            @carstend said in Alignmend of modules:

            but I am not an CSS / HTML expert

            me neither… i hate working on the UI

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • M Offline
              MajorC Project Sponsor @CarstenD
              last edited by MajorC

              @carstend I added the question to the DWD-Pollen thread, but no respond so far.

              https://forum.magicmirror.builders/topic/12247/mmm-dwd-pollen/19?_=1616656403635

              text-align: right
              

              will move the text, so it is not centered anymore. But the goal is, to get rid of the space on the right side.

              Update:
              I now use:

              .MMM-DWD-Pollen table {
              	margin-left: auto;
              	margin-right: -40px;
              }
              

              Not sure if this is a good way, but it works for me at the moment.

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