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.

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

    Scheduled Pinned Locked Moved Custom CSS
    2 Posts 2 Posters 771 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.
    • C Offline
      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 Offline
        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

        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