• 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
    last edited by Mar 16, 2021, 5:11 PM

    As I have the default calendar plugin, which needs a width of 475px, the upper modules currentweather, weatherforecast and MMM-DWD-WarnWeather are not really right-aligned. As you can see on the screenshot, I would like to keep the module on the right border of the frame. For the DWD-WarnWeather module, the module itself is placed correct, but the content is not right aligned.

    What Do I need to do in order to fix that?

    mm.JPG

    K 1 Reply Last reply Mar 16, 2021, 7:03 PM Reply Quote 0
    • K Offline
      karsten13 @codac
      last edited by Mar 16, 2021, 7:03 PM

      @codac all these modules have the same position top_right?

      For the warnings module you could use custom.css and overwrite the text-align: left; in the module css with text-align: right;

      You can also play with css in the browser, e.g. see this thread.

      1 Reply Last reply Reply Quote 0
      • C Offline
        codac
        last edited by Mar 18, 2021, 11:28 AM

        @karsten13 correct they are all top_right. Your suggestion worked:

        .MMM-DWD-WarnWeather .status {
            font-family: "SFPro";
            text-align: right;
        }
        

        Your hint with playing with css in my browser helped to figure out that currentweather and weatherforecast behave like this because of a max-width of 325 that I already had set in the custom.css, as where the calendar has 475px.

        M 1 Reply Last reply Mar 19, 2021, 11:54 AM Reply Quote 1
        • M Offline
          MajorC Project Sponsor @codac
          last edited by Mar 19, 2021, 11:54 AM

          @codac I think you have to add

          .MMM-DWD-WarnWeather .description {
              text-align: right;
          }
          
          1 Reply Last reply Reply Quote 0
          • M Offline
            MajorC Project Sponsor
            last edited by Mar 19, 2021, 12:19 PM

            I have a similar problem.

            I would like to have the yellow icon closer to the right in the module: ‘MMM-DWD-WarnWeather’.
            dwd.jpg

            And I would like to get rid of the space on the right in the module: “MMM-DWD-Pollen”.
            pollen.jpg

            C S 2 Replies Last reply Mar 19, 2021, 12:41 PM Reply Quote 0
            • 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
                      • 1
                      • 2
                      • 1 / 2
                      1 / 2
                      • First post
                        3/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