• 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.

Alignmend of modules

Scheduled Pinned Locked Moved Troubleshooting
11 Posts 5 Posters 2.8k 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.
  • C Offline
    codac @MajorC
    last edited by Mar 19, 2021, 12:41 PM

    @majorc The question with the MMM-DWD-WarnWeather module I can answer. Was a bit tricky to find out, but what works for me is to set the follwing into the custom.css:

    .MMM-DWD-WarnWeather .warning {
        float: right;
    }
    
    M 1 Reply Last reply Mar 19, 2021, 12:58 PM Reply Quote 1
    • M Offline
      MajorC Project Sponsor @codac
      last edited by Mar 19, 2021, 12:58 PM

      @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 Mar 19, 2021, 3:58 PM Mar 19, 2021, 3:53 PM

        @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 Mar 21, 2021, 3:53 PM Reply Quote 0
        • C Offline
          CarstenD @sdetweil
          last edited by Mar 21, 2021, 3:53 PM

          @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 Mar 21, 2021, 4:12 PM Reply Quote 0
          • S Offline
            sdetweil @CarstenD
            last edited by Mar 21, 2021, 4:12 PM

            @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 Mar 25, 2021, 7:34 AM Mar 25, 2021, 7:17 AM

              @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
              • 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