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.

    Clock and current weather horizontally

    Scheduled Pinned Locked Moved Custom CSS
    8 Posts 3 Posters 1.7k 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.
    • J Offline
      JasonInOttawa
      last edited by JasonInOttawa

      @ashishtank I believe you’re showing a clock followed by a calendar. If so, yes, that’s what I’d like, except with a clock and current weather. Thanks very much for your reply.

      J A 2 Replies Last reply Reply Quote 0
      • J Offline
        JasonInOttawa @JasonInOttawa
        last edited by

        This seems to work

        .currentweather {
          display:inline-block;
          margin: 2px;
          zoom:60%;
        }
        
        .clock {
          display:inline-block;
          margin: 2px;
        }
        
        A 1 Reply Last reply Reply Quote 0
        • A Offline
          ashishtank Module Developer @JasonInOttawa
          last edited by

          @JasonInOttawa yes, Indeed I was only giving example to understand the requirement. you can do it by using custom.css file. Add below code to show clock and current weather side by side.

          .clock
          {
          	float: left;
          }
          .currentweather
          {
          	float: left;
          	padding-left: 20px; //Adjust this for left spacing between both modules
          }
          
          

          below should be output.

          5fc505aa-4534-42dd-8445-b056090521d0-image.png

          1 Reply Last reply Reply Quote 0
          • A Offline
            ashishtank Module Developer @JasonInOttawa
            last edited by

            @JasonInOttawa yes there are multiple ways to achieve the same :) We both posted reply at same time !

            J 1 Reply Last reply Reply Quote 0
            • J Offline
              JasonInOttawa @ashishtank
              last edited by

              @ashishtank Thanks again! I did notice one difference: the inline-block keeps the bottoms lined up

              bottom line up.png

              and the float puts the second element a bit higher:

              up to the left.png

              It all depends on which effect you prefer.

              A 1 Reply Last reply Reply Quote 0
              • A Offline
                ashishtank Module Developer @JasonInOttawa
                last edited by

                @JasonInOttawa May be float is doing this because you are not showing week text as header ? In my screenshot they are aligned on top. Any ways both are on user choice ! :)

                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