Thats good. Did not mess that up…

I did a copy and paste of your code into my config file.

On the laptop I want the newsfeed. It just says “Loading …” (BEFORE changing width to 801)
On my phone, I do not want the newsfeed and it is NOT there. So that works great.

THANK YOU!!!

Changed width to 801 seems to be working now!
The short code works not too (without all the comments)

Thank you again! Be safe!

Thank you.

I’ve had it with and without the ending comma. Your changes, I’ve put in config.js only (node helper???) I did not put it in the modulename.js

Event tried:

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

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

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.

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.

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?

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.

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

@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.

Getting really close!

My config file is:

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

SNIP

		{
			module: "newsfeed",
			position: "bottom_bar",
disabled: width > small_size ? false:true,
			config: {
SNIP

On phone does not show. On laptop stuck at “Loading…”

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.