• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 8.7k 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 Apr 27, 2020, 8:02 PM

    @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 Apr 27, 2020, 8:11 PM Reply Quote 0
    • R Offline
      Radnor
      last edited by Radnor Apr 27, 2020, 8:06 PM Apr 27, 2020, 8:05 PM

      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 Apr 27, 2020, 8:16 PM Apr 27, 2020, 8:11 PM

        @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 Apr 27, 2020, 8:17 PM Reply Quote 0
        • S Offline
          sdetweil @sdetweil
          last edited by Apr 27, 2020, 8:17 PM

          @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 Apr 27, 2020, 8:23 PM Reply Quote 0
          • S Offline
            sdetweil @sdetweil
            last edited by Apr 27, 2020, 8:23 PM

            @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 Apr 27, 2020, 8:29 PM Apr 27, 2020, 8:27 PM

              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 Apr 27, 2020, 8:37 PM

                @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 Apr 27, 2020, 8:54 PM Apr 27, 2020, 8:53 PM

                  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 Apr 27, 2020, 9:11 PM Reply Quote 0
                  • S Offline
                    sdetweil @Radnor
                    last edited by Apr 27, 2020, 9:11 PM

                    @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 Apr 27, 2020, 11:56 PM

                      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 Apr 27, 2020, 11:58 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 1 / 4
                      1 / 4
                      • First post
                        19/32
                        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