in the config.js it does not like outerWidth. shows errors as loading up. It DOES get the correct value though…

I have at the top of my config file:

var small_size = 800;
var ss = outerWidth;

In debug mode I can see both vars getting their respective values.

@sdetweil In my config.js file I tried screen.width outerWidth with no luck. Would you mind some code from your main.css?

Tried window.xxxxx too without luck.

@sdetweil I will try that little later today. Yes, I like the idea of setting a var too.

@sdetweil thank you for the reply. But I think I lead you down the wrong path looking for my solution…

I have MM running on a RPI it’s started by a small script running “npm start”. There it displays all of the info I am looking for. Works GREAT!!!

When I connect to it from a DIFFERENT machine is where I want to detect the screen size and adjust accordingly.
Typing the address in as xxx.xxx.xxx.xxx:8080 from my laptop display all info (same as RPI). But, if I connect and the screen is small (phone, kindle fire, 7" screen, etc) just show time, date, weather, and forecast.

I started down the path of (window.size in js) but made my config file very angry. Did not try @media in css yet.

With the COVID and the stay at home thing, have lots of time to explore…

Thank you again and be safe!

Currently I do not have a custom CSS defined. Only using default CSS.

What I would like to do is determine screen size and if large screen use my existing CSS.
If 7" screen (or smaller) I only want to display clock, current weather, and forecast vertically.