A short update: I was able to move the modules manually using css. It seems to work but it’s not an elegant solution. Any ideas/suggestions how to do it right?

0_1558509939513_Screenshot 2019-05-21 at 23.30.34.png

tml { height: 1080px; width: 1920px; } header { text-transform: uppercase; font-size: 26px; font-family: "Roboto Condensed"; font-weight: 600; border-bottom: 1px solid white; line-height: 15px; padding-bottom: 5px; margin-bottom: 10px; color: cadetblue; } body { margin: 10px; position: absolute; height: 1080; width: 1920px; background-color: rgba(214, 214, 214, 0.8); background-repeat: no-repeat; /*background-size: 1920;*/ font-family: "Roboto Condensed", sans-serif; font-weight: 400; font-size: 2em; line-height: 1.5em; -webkit-font-smoothing: antialiased; } .region.top.left .container .module.currentweather { width: 400px; height: 250px; position: absolute; left: 90px; top: 90px; background-color: rgba(20, 102, 186, 0.5); /*kek*/ } .module.clock { width: 400px; height: 400px; position: absolute; left: 760px; top: 90px; background-color: rgba(80, 196, 0, 0.5); /*zold*/ } .region.top.right .container .module.MMM-SL-PublicTransport { width: 400px; height: 500px; position: absolute; left: 1490px; top: -00px; background-color: rgba(20, 102, 186, 0.5); } .region.bottom.bar .container { width: 1740px; height: 310px; position: absolute; left: 90px; top: 680px; background-color: rgba(247, 173, 236, 0.5); /*magente*/ }