MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    Changing size/font for a module but not the whole region

    Custom CSS
    2
    2
    300
    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
      CheapDad last edited by

      I’ve read the “Getting started” thread and a thread that sdetweil directed me to. Here’s where I’m running into issues:

      I have the default clock, mmm-monthly_calendar and the default calendar all located in top_left. Both mmm-monthly_calendar and the default calendar are wider than I’d prefer.

      Reducing the pixel width of the region gets me to where I want to be:

      .region.top.left {
        width: 100%;
        max-width: 300px;
        min-width: 10vw;
      }
      

      However, when I do that, the font size for the default calendar is too large to fit everything in that space, so it wraps, making the length of the feet (vertically) too large.

      I tried adjust the font size, but nothing happened:

      .MMM-calendar {
        font-size: 24px;
      }
      

      In the calendar.css, the font size is identified as variable, which I think is part of my problem:

      font-size: var(--font-size-small);
      

      While we’re at it, even at the default sizes, the default calendar module is unable to display all of the data sends to the module, so I get an ellipse at the end. Is it possible to code the css so that all data is shown, with it wrapping in order to do so?

      TIA, CheapDad

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

        @cheapdad said in Changing size/font for a module but not the whole region:

        .MMM-calendar

        isn’t that .MMM-Calendar

        case matters

        also
        read this
        https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1625369547195

        about how to use the developers window to test out the changes needed

        one thing not known then

        once you figure out the settings, you can copy paste the top right window to paste into your css entry in custom.css

        Sam

        Create a working config
        How to add modules

        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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
        This forum is using NodeBB as its core | Contributors
        Contact | Privacy Policy