Css error in Main.css?

[BKeyport]

I’m having a few problems with CSS that I think is all related.

1. Middle Center zone is left aligned when it should be centered.
2. I used to be able to stack modules sideways in the top bar using:

/* adjust modules to display side by side */
.MMM-ValuesByNotification, .MMM-OpenWeatherForecast {
	display: inline-flex;
	margin-right: 5px;
	margin-left: 5px;
}

Now it seems the modules are forced to left-align (rather than center) and are contained in a 100% width container.

Any clue what’s going on?

[sdetweil]

@BKeyport there was a change in the css to support a new config option

see https://forum.magicmirror.builders/post/127225

[BKeyport]

@sdetweil Ahh, gotcha. Changing the container display to inline-flex fixes centering issue on middle-center, but does not fix being able to set modules side by side.

I currently have:

.region .container {
  display: inline-flex;
}


/* adjust modules to display side by side */
.clock, .MMM-Worldclock {
	display: inline-flex;
	margin-right: 5px;
	margin-left: 5px;
}

in my custom.css for that screen.

Thanks!

[sdetweil]

@BKeyport yes, its was dependent on display:block, the default if not specified

i posted in that earlier thread about doing display: grid

[BKeyport]

@sdetweil doh. I missed that comment.

Works now. Course, Middle_center don’t. 🤣

[sdetweil]

@BKeyport need to move it over w css

[BKeyport]

@sdetweil I couldn’t get it right. It would either be offscreen to the far right and not able to pull back, or otherwise messed up. MMM-EmbedURL for what it’s worth. Gave up. Chose the top bar working the way I wanted, and got rid of middle_center screen and simplified.

[chrisfr1976]

@BKeyport

You could try this module: MMM-GlobalPositioner. This can push a module wherever you want it to :)

[sdetweil]

@BKeyport i went back and looked at my top_center example, a 3x2 grid

.region.top.center .container {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: repeat(2,1fr);
        gap:10px;
}

and added modules and get them in rows… as expected

but top center is not full screen width
with middle_center, grid and pages, things get nutty… the grid positions are consumed even when the module in the grid is not shown