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.

    use bottom bar better

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    6 Posts 2 Posters 30 Views 2 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 @dcazman
      last edited by sdetweil

      @dcazman in a earlier release we added a specific style for container, used in each region or position

      .region .container {
        display: flex;
        flex-direction: column;
      }
      

      What you may be able to do is override that for bottom right

      .region.bottom.right .container {
          flex-direction:row;
      }
      

      in a previous post a few months ago I posted, for top-bar (not left or right)

      .region.bar.top .container {
              display: inline-flex !important;
              flex-direction: row;
      }
      

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      D 1 Reply Last reply Reply Quote 0
      • D Offline
        dcazman @sdetweil
        last edited by sdetweil

        @sdetweil

        .region.bottom.right .container {
            flex-direction:row;
        }
        
        

        works but it crams it right. Making no space between current and forecast.

        they are not on top of each other rather its run on sentance.

        do i need to add more css to try and add some pad to the right of current weather ?

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

          @dcazman yes, you will have to add spacing (padding I think its called)

          be careful, padding on left will mean both, same for right, unless you target the module and not the container

          see the second link in my sig below for starter on using the browser window elements tab to discover and test css changes(which would go into custom.css)

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          D 1 Reply Last reply Reply Quote 0
          • D Offline
            dcazman @sdetweil
            last edited by

            @sdetweil

            .clock .time {
              font-size: 18rem;   /* try 12rem, you can adjust up/down */
            }
            .clock .date {
              font-size: 4rem;    /* optionally adjust the date size */
            }
            
            .region.bottom.right .container {
                flex-direction:row;
            }
            
            .currentWeatherModule {
              margin-right: 50px;
              font-size: 5rem;
            }
            

            The padding works but the font-size has no impact.

            i tried going straight for

            .weather

            but that did not help.

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

              @dcazman yes, fontsize is a brain twister

              many of the html elements do not inherit settings from things above them

              imagine if fontsize 50 worked on the top level of a printed page, suddenly everything would be 50…, even when you meant on this paragraph
              and some other paragraph already said 20, oops…

              SO, you need to find the element in the dev window elements tab and see where it got its size from (right column after you select that html element) and fix that…

              Sam

              How to add modules

              learning how to use browser developers window for css changes

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