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.

    Is it possible to have CSS for normal screens and a custom CSS for 7in screen?

    Scheduled Pinned Locked Moved Custom CSS
    32 Posts 3 Posters 10.0k 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.
    • S Do not disturb
      sdetweil @sdetweil
      last edited by

      @Radnor I had to fix the size for node_helper loading…

      I have them enabled if big screen, disabled if small screen

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      S 1 Reply Last reply Reply Quote 0
      • S Do not disturb
        sdetweil @sdetweil
        last edited by

        @sdetweil better

        var width	= 801
        try {
          	width=outerWidth
        }
        catch(error){
        
        }
        var small_screen=800
        

        and module disabled

        		{
        			module: "calendar",
        			disabled: width>small_screen ?false: true,
        

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • R Offline
          Radnor
          last edited by Radnor

          OK, I think the disabled has something to do with the newsfeed.

          I have several config files. config_WORKING has modules alert, notify, clock, wx, wx forecast, calendar, and newsfeed.

          I have config_CLOCK with modules clock, wx, and wx forecast. In this config I told it via disable: width > small ? false:true. On my laptop get all 3. on phone no forecast (which should not be there).

          In the newsfeed module the disable test is messing it up.

          I rename either WORKING or CLOCK to just config.js to test.

          1 Reply Last reply Reply Quote 0
          • S Do not disturb
            sdetweil
            last edited by

            @Radnor said

            I have config_CLOCK with modules clock, wx, and wx forecast. In this config I told it via disable: width > small ? false:true. On my laptop get all 3. on phone no forecast (which should not be there).

            I see 4 things in the list

            on phone, no forecast, which is not an error?

            i set my newsfeed to

            		{
            			module: "newsfeed",
            			disabled: width>small_screen?false:true,
            

            see on desktop, not on phone, as expected

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • R Offline
              Radnor
              last edited by Radnor

              There’s 3 (wx forecast) is forecast. Not weather AND forecast.

              No error because in forecast was disabled because of small screen.
              I copied your 2 lines (newsfeed & disabled) and get error when starting it. Complains about my config file…

              Any way of letting it load up and do a display:none in the CSS file for small screen?

              S 1 Reply Last reply Reply Quote 0
              • S Do not disturb
                sdetweil @Radnor
                last edited by

                @Radnor notice my variable names (small_screen) are not the same as yours… (small_size)

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 0
                • R Offline
                  Radnor
                  last edited by

                  Initially, I did NOT see the different variable name.

                  Cannot get the Ternary op to work at all. I copy/paste (and change var name) your code without luck.
                  A straight “disabled: true” works.

                  S 1 Reply Last reply Reply Quote 0
                  • S Do not disturb
                    sdetweil @Radnor
                    last edited by

                    @Radnor its a (if) ? when_true : when_false

                    show me your code now

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 0
                    • R Offline
                      Radnor
                      last edited by

                      var small_size = 800;
                      var width = 0;
                      try {
                      width=outerWidth
                      }
                      catch(error){
                      }

                      var config = …

                      	{
                      		module: "newsfeed",
                      

                      disabled: width < small_size ? true:false,
                      position: “bottom_bar”,
                      config: {

                      I had it WITH and WITHOUT the comma after false. I had parens around the logical test too.

                      S 1 Reply Last reply Reply Quote 0
                      • R Offline
                        Radnor
                        last edited by

                        Event tried:

                        if (small_size>width) {
                        disabled: true,
                        }

                        this generates error in config with lots of red text on loading up

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