Layout and positioning on a tiny screen.

[smackenzie5]

@broberg Is there an order of precedence between custom.css, calendar.css, and config.js?

I’ve added the position, left and top lines above to my custom.css and calendar.css.
(I put the lines in both just trying to get it to work)

When I start up MagicMirror, the calendar module is in the correct position when it says “Loading…” but once the calendar loads, the module changes position. To me, it looks like the module is at the “top_left” position below the clock which is what the config.js specifies.

Any thoughts on why the module is moving position after loading?

BTW – I added the lines to drop the margin completely to my custom.css and it worked great, no problems.

Thanks,
Scott

[broberg]

@smackenzie5

It should load main.css, then calendar.css and last custom.css

The last loaded css takes presidene over the others (thats why one should make changes in custom.css only).

[smackenzie5]

Thanks @broberg

Does the config.js file takes precedence over the css files?

I’ve tried deleting the calendar’s position line in the config.js file and the calendar module can’t be seen. I tried changing the calendar’s position to absolute in the config.js files and that prevented the mirror from loading at all. Basically, is there anything that needs to be done to the config.js file or should the custom.css file take precedence over everything?

[broberg]

@smackenzie5

Config.js doesn’t really do anything to the layout, it is the index.html and main.css that defines the different positions that you can use.

[Giarry88]

@broberg said in Layout and positioning on a tiny screen.:

@smackenzie5

Config.js doesn’t really do anything to the layout, it is the index.html and main.css that defines the different positions that you can use.

Hi guys!
It seems like I am blowing the dust off this old topics!
By the way… I am trying to change the postions of some modules and I am having the same issue as @smackenzie5 , first it loads the module where i want to place it, but at the end of the loading it increases the size of the top_bar and place it as default.

this is what I’ve put in the custom.css

.MMM-network-signal{
position: absolute;
transform.scale(0,35);
left: 1800px;
top: 0px;
}

Is it because it overlaps with the Weather module?