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.

    calendar_monthly: Please help me with column width.

    Scheduled Pinned Locked Moved Solved Troubleshooting
    3 Posts 2 Posters 831 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.
    • M Offline
      MaXi-XCeL Project Sponsor
      last edited by

      I love the calendar_monthly module. It’s a true addition to my Magic Mirror project. Can you please help me reduce the width of the columns? I’m failing to figure it out.

      I’m talking about the space between ma. di. wo. do. and their corresponding dates.
      I’ve been working with custom.css, moving things from the calendar_monthly mcal.css to custom.css and I even tried to inspect the elements in Chrome but I just can’t figure it out.

      Please help. I’m almost there ;)

      Screenshot 2021-01-01 at 02.30.37.png

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

        @MaXi-XCeL You can adjust the width of calendar using custom.css, right now it is set to 100% and each cell (day) is set to 14.2 % (so 14.2 x 7 = ~ 100 full width of calendar). Put below in your custom.css adjust the 80% to your taste.

        #calendar-table {
        	width: 80%;	
        }
        

        Before

        475251bf-1c80-4bcb-957e-ae9bff1f9db7-image.png

        After
        f773dc83-2e5e-4242-b811-e2f585e0e585-image.png

        1 Reply Last reply Reply Quote 0
        • M Offline
          MaXi-XCeL Project Sponsor
          last edited by

          @ashishtank said in calendar_monthly: Please help me with column width.:

          #calendar-table {
          width: 80%;
          }

          This worked perfectly. Thank you ashishtank! Really helpful.

          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