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 9.4k 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.
    • R Offline
      Radnor @sdetweil
      last edited by

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

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

      disabled: width > small_size ? false:true,

      because width =0

      Dont think so. I started it up with DEV option. Loaded the config.js file in debugger hovered over the width and it showed 1280. Then hovered over the small_size and it showed 800. Then thought false and true might need double quotes because the rest in config has t/f in double quotes.

      Thank you for sticking with me and getting this working I really appreciate your time. it is SO close.

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

        I put in config width =801 and reran it. Same “Loading …”
        And commented out try - catch block.

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

          @Radnor single or double quotes don’t matter, as long as both ends of the string have the same

          I just set my code to

          var width	= 1920  // make it so on big screen they get enabled
          try {
            	width=outerWidth
          }
          catch(error){
          
          }
          var large_screen=1920  // expected size on computer
          

          and the test for calendar at

          			module: "calendar",
          			disabled:    width< large_screen?true:false, // if the current screen is smaller than computer, disabled
                                                                               // you can flip too,  ?false:true
          			header: "US Holidays",
          			position: "top_left",
          

          Sam

          How to add modules

          learning how to use browser developers window for css changes

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